Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #92 - Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #92

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:

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

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:

To create a new Nuxt layer, visit 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:

1pnpm add -D @nuxtjs/tailwindcss

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

1export default defineNuxtConfig({
2 modules: ['@nuxtjs/tailwindcss'],

Next, we add our BaseComponent in the components folder:

2 <button class="rounded-md border-2 bg-blue-400 p-2 text-white">
3 <slot />
4 </button>

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

1pnpm publish --access public

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:

⚑ Open Demo
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:

1pnpm add -D @mokkapps/nuxt-layer-demo

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

2 extends: '@mokkapps/nuxt-layer-demo',

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

1export default defineNuxtConfig({
2 extends: [
3 '../base', // Extend from a local layer
4 '@my-themes/awesome', // Extend from an installed npm package
5 'github:my-themes/awesome#v1', // Extend from a git repository
6 ],

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:

⚑ Open DemoCurated Vue & Nuxt ContentπŸ“• Three ways to expose internal Vue components API
πŸ‘‰πŸ» Ever wondered when to use @vuejs scoped slots vs template refs and where each shines?
πŸ“• Extending Vue Router Links in Vue 3
πŸ‘‰πŸ» Daniel Kelly explains how you can write a single component for all the links internal and external.
Quote of the weekCurated Web Development ContentπŸ“• npm vs yarn vs pnpm
πŸ‘‰πŸ» This article compares them on speed, dependency resolution, offline mode, security, and custom registries.
πŸ“• A few developer console tricks
πŸ‘‰πŸ» This article uncovers some tips and tricks for getting the most out of your browser’s developer tools.
πŸ“• The future of programming: Research at CHI 2023
πŸ‘‰πŸ» CHI 2023 is a conference for leading human-computer interaction research.
πŸ‘‰πŸ» This blog post lists some interesting papers related to programming, such as visual methods to debug better.
πŸ“• A Completely Non-Technical Explanation of AI and Deep Learning
πŸ‘‰πŸ» If you've ever struggled to explain AI to your non-technical friends and family, here's a great story-based approach.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 All rights reserved.