This is not a tutorial. There are plenty of tutorials out there that explain how to use Nuxt. This is more of a personal opinion piece about why I like Nuxt.

Stability - a seldomly mentioned feature

One of the things that I really like about Vue is the stability of the framework. Over the last years, I have build a couple of applications with Vue and I have never had to rewrite a lot of code because of breaking changes.

This is something that I really appreciate, especially when it comes to building applications that need to be maintained over a longer period of time. I just update the dependencies (even with breaking changes) and everything works as expected. There are some minor migrations that I have to do, but they are usually well documented and easy to follow. This is something that I really like about Vue and Nuxt.

Nuxt layer architecture

In a project that I am currently working on, I have a great usecase for Nuxt's layer architecture. We are making two websites with different content, a different language, but the same design with some minor differences in branding:

• Site A: English, with a specific set of content
• Site B: Dutch, with a different set of content
• Both sites share the same design and layout

export default defineNuxtConfig({
  extends: ['../ui'],
})

What works really well is the fact that a layer is a complete copy from the copied Nuxt project. This copy is then used for the next project. Whenever you need to differ from the original project, you can just duplicate the component, layer, or page and make the changes you need.

From there on, you can just use the auto import feature of Nuxt to import the components from the layer. This way, you can easily share components between the two projects and make changes to both at the same time.

The thing that you should keep in mind is the path resolution. If you want to use the components from the layer, you need to make sure that the path is correct. This is something that I have learned the hard way, but it is easy to fix. Whenever you want to keep stuff 'inside the layer', you can use the default

export default defineNuxtConfig({
  // We want to use the layer as a base for our project
  css: [join(currentDir, 'assets/style/tailwind.css')],
})

Or when you want to use the consuming project as the base for your project:

export default defineContentConfig({
  // other config
  source: {
    // Here we want to use the consumer project as the source for the content
    cwd: path.resolve('content'),
      include: '**/curriculum/*.md',
    },
  },
})

There might be more elegant ways to do this, but I have found that this works really well for my usecase. I can easily share components between the two projects and make changes to both at the same time.

Bonus: monorepo

Nothing too crazy here, but I also use this in a monorepo setup. This allows me too manage the dependencies of both projects in a single place. It is also easy to quickly switch between the two projects and make changes to both at the same time.

Now I am curious how I would have done this for example with Next.js. I went ahead and looked some stuff up, but I soon got lost in other work and didn't have the time to really dive into it. I also find it hard to try something like this without a real usecase. To be continued...