Nuxt Module we could just add it in the root of the application and write storyblok components, fetch content types, add plugins. But the problem with this approach is that it will make it more difficult to maintain such project if we would need to make some global changes.
Instead we could keep our code inside modules/storyblok folder and utilize the great concept of auto imports that would allow us to use components, pages, composables inside our core application.
Nuxt Commerce Modular Architecture
Let's take a look at the following code:
// modules/storyblok/index.ts
export 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
})
},
})
In it, we have created a new local Nuxt module that will register and auto import Vue components that we will create in this folder and later register the official Storyblok module for Nuxt that will help us to communicate with Storyblok Content API.
If you would like to see a working example, check out the Nuxt Commerce project and specifically the Storyblok branch here.
📖 Learn more
If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:
Vue School Link
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉
✅ Summary
Nuxt’s modular architecture isn’t just about breaking things up—it’s about building applications that are cleaner, more maintainable, and more scalable. Whether you’re consuming modules from the community or building your own, this pattern empowers developers to ship better apps faster.
Take care and see you next time!
And happy coding as always 🖥️