Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps

Hi 👋

In this edition, I don't have any groundbreaking news to drop, but I'm planning to update one of my most popular blog posts: "Why I Switched From WebStorm to VS Code." The new title should be "Why I Use Both IntelliJ and VS Code".

I got feedback that my website is being blocked by antivirus software. I reported these false positives and I hope that it will be resolved in the next few days. Sorry for that, I still have no idea why that happened 🤷🏻‍♂️

Oh, and guess what? I've got a fantastic Nuxt tip for you in this issue! It's all about Nuxt Layers, a neat little trick that lets you share components, utils, and configuration between your apps effortlessly. It's a total game-changer for streamlining your development process and making your code more reusable.

Get ready for some fun and insightful content on Vue.js and Nuxt.js. I hope you find the tips and updates in this newsletter helpful and inspiring.

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

Nuxt 3 provides a powerful core feature that allows you to share components, utils, and configurations between your Nuxt 3 applications. These so-called layers are almost identical to a standard Nuxt application, let's take a look at an example.

Create Layer

For this demo, we would like to share two things from our Nuxt layer:

• the Nuxt Tailwind module
• a BaseButton component

To create a new Nuxt layer, visit nuxt.new and select the Layer starter:

To add the Tailwind module, we follow the getting started steps from the module documentation:

First, we install the module:

Then we add it to the modules section in our nuxt.config.ts:

Next, we add our BaseComponent in the components folder:

For this demo, let's share the layer via NPM. You can easily publish your layer by running the following command:

It will publish the layer with the name specified in package.json.

You can share more than components and modules with a Nuxt layer, for example:

• reusable configuration presets in nuxt.config and app.config
• utility and composable functions inside /composables and utils/ directories
• Nuxt themes
• Nuxt module presets

The code for this demo Nuxt layer is available at StackBlitz:

Use Layer

Now let's use our Nuxt layer in a Nuxt application. The first step is to install the NPM package of our Nuxt layer:

Then you need to add the dependency to extends in nuxt.config:

You can also extend from a local layer or a Git repository:

Without any further configurations, you can now use BaseButton and Tailwind classes in our Nuxt application.

The code for this Nuxt application is interactively available at StackBlitz:

Until next week,