A high-performance, server-rendered E-commerce app built with Nuxt & Shopify (Demo).
This template uses Nuxt UI, Image & Scripts optimization, Hybrid Rendering, SEO and more.
Nuxt Commerce comes with several useful features out of the box:
You will need to use the environment variables defined in .env.example
to run Nuxt Commerce.
Note: You should not commit your
.env
file or it will expose secrets that will allow others to control your Shopify store.
pnpm installcopy .env.example .envpnpm run dev
Your app should now be running on localhost:3000.
You can also inspect production build like so:
pnpm run buildpnpm run preview
If you wish to add an integration with 3rd Party service like Content Management System, Search Engine, or Payment Provider, you can do so by using the regular Nuxt module approach.
Create a new folder in the modules
directory named as your integration (i.e storyblok
) and inside of it, and index.ts
file.
Normally, you could just install the modules and plugins directly inside the global nuxt.config.ts
but as your application grows, it could become much harder to maintain the project. By following the modules
approach defined by Nuxt you can easily extract domain code into separate module that wraps components, composables, types, and overall integration configuration
If your integration already has a Nuxt module existing, you can import it like shown below. In this file, you can also add integration specific code like components, composables, pages, and enable auto import for them.
// modules/storyblok/index.tsexport default defineNuxtModule({meta: {name: 'storyblok',},async setup() {const { resolve } = createResolver(import.meta.url)addComponentsDir({path: resolve('components'), // enable auto import for components/composables/types})await installModule('@storyblok/nuxt', {accessToken: '<YOUR_API_KEY>',componentsDir: '~/components',// more configuration options})},})
Check out the full integration example here
In case of funcionality that does not have a Nuxt module yet, instead of installModule
function, you would need to write a custom plugin youself.
By default, Nuxt Commerce works with Shopify as the E-Commerce Platform but you can use different platforms as well such as Medusa. To do so, you would need to create a custom integration by following thse steps:
modules
directoryindex.ts
file where the e-commerce backend code will be.
// modules/medusa/index.tsexport default defineNuxtModule({meta: {name: "medusa",},async setup() {const { resolve } = createResolver(import.meta.url);addImportsDir(resolve("composables")); // enable auto import for components/composables/typesawait installModule('@nuxtjs/medusa', {baseUrl: '<YOUR_BASE_URL>'// more configuration options})}})
useCart
, useAuth
, etcshopify
folder from your projectThis project wouldn't be possible without a help of amazing people below:
A high-performance, server-rendered E-commerce app built with Nuxt & Shopify (Demo).
This template uses Nuxt UI, Image & Scripts optimization, Hybrid Rendering, SEO and more.
Nuxt Commerce comes with several useful features out of the box:
You will need to use the environment variables defined in .env.example
to run Nuxt Commerce.
Note: You should not commit your
.env
file or it will expose secrets that will allow others to control your Shopify store.
pnpm installcopy .env.example .envpnpm run dev
Your app should now be running on localhost:3000.
You can also inspect production build like so:
pnpm run buildpnpm run preview
If you wish to add an integration with 3rd Party service like Content Management System, Search Engine, or Payment Provider, you can do so by using the regular Nuxt module approach.
Create a new folder in the modules
directory named as your integration (i.e storyblok
) and inside of it, and index.ts
file.
Normally, you could just install the modules and plugins directly inside the global nuxt.config.ts
but as your application grows, it could become much harder to maintain the project. By following the modules
approach defined by Nuxt you can easily extract domain code into separate module that wraps components, composables, types, and overall integration configuration
If your integration already has a Nuxt module existing, you can import it like shown below. In this file, you can also add integration specific code like components, composables, pages, and enable auto import for them.
// modules/storyblok/index.tsexport default defineNuxtModule({meta: {name: 'storyblok',},async setup() {const { resolve } = createResolver(import.meta.url)addComponentsDir({path: resolve('components'), // enable auto import for components/composables/types})await installModule('@storyblok/nuxt', {accessToken: '<YOUR_API_KEY>',componentsDir: '~/components',// more configuration options})},})
Check out the full integration example here
In case of funcionality that does not have a Nuxt module yet, instead of installModule
function, you would need to write a custom plugin youself.
By default, Nuxt Commerce works with Shopify as the E-Commerce Platform but you can use different platforms as well such as Medusa. To do so, you would need to create a custom integration by following thse steps:
modules
directoryindex.ts
file where the e-commerce backend code will be.
// modules/medusa/index.tsexport default defineNuxtModule({meta: {name: "medusa",},async setup() {const { resolve } = createResolver(import.meta.url);addImportsDir(resolve("composables")); // enable auto import for components/composables/typesawait installModule('@nuxtjs/medusa', {baseUrl: '<YOUR_BASE_URL>'// more configuration options})}})
useCart
, useAuth
, etcshopify
folder from your projectThis project wouldn't be possible without a help of amazing people below: