Project Structure

Overview

A shopify-app-nuxt app is a standard Nuxt application with the shopify-app-nuxt module enabled. The module auto-registers server utilities, client composables, components, OAuth routes, and App Bridge — so your project stays clean.

Typical structure

export default defineNuxtConfig({
  modules: ['shopify-app-nuxt'],

  shopify: {
    apiKey: process.env.SHOPIFY_API_KEY,
    apiSecretKey: process.env.SHOPIFY_API_SECRET_KEY,
    appUrl: process.env.SHOPIFY_APP_URL,
    navLinks: [
      { label: 'Home', href: '/', rel: 'home' },
      { label: 'Products', href: '/products' },
      { label: 'Settings', href: '/settings' }
    ]
  }
})

Key files

• nuxt.config.ts — Module config: API credentials, scopes, navigation links, and other options. See Configuration for the full list.
• server/plugins/shopify.ts — Nitro plugin for complex runtime objects: session storage, lifecycle hooks, webhooks, and billing.
• layouts/default.vue — Wrap pages with <ShApp> to render the App Bridge navigation menu.
• server/api/*.ts — Server API routes using auto-imported utilities like useShopifyAdmin and useShopifyWebhook.

What the module registers automatically

You don't need to manually set up any of these — the module handles them: