Nuxt 3 Base Layer

Nuxt 3 preset layer for common dependencies.

I used to create Nuxt projects over and over again and copy these dependencies over and over again. This is seriously against the spirit of programming!

This is a base layer for Nuxt 3 projects. No subjective configurations are included here. It includes:

• Tailwind CSS
• Color Mode
• Pinia & Pinia Plugin Persistedstate
• VueUse
• Nuxt i18n
• lodash
• dayjs
• Nuxt Image

This project is only used to constrain dependencies, so that we don't create the Nuxt project from scratch.

Usage

Creating a new Nuxt project:

pnpm dlx nuxi@latest init $YOUR_PROJECT_NAME

Add @alexsun-top/nuxt-base-layer to your project:

pnpm add -D @alexsun-top/nuxt-base-layer @vueuse/core

Add the layer to your Nuxt project:

// nuxt.config.ts
export default defineNuxtConfig({
  // ...
  extends: [
    '@alexsun-top/nuxt-base-layer',
  ],
})

If your dayjs goes wrong, you can add it to the optimizeDeps:

pnpm add -D dayjs

Configure nuxt.config.ts:

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: [
        'dayjs',
      ],
    },
  },
})

Configuration

You can disable some of the dependencies by setting the following environment variables:

| Environment Variable | Package | | ---------------------------------- | ----------------------------------- | | BASE_DISABLE_TAILWINDCSS | @nuxtjs/tailwindcss | | BASE_DISABLE_COLORMODE | @nuxtjs/color-mode | | BASE_DISABLE_ICON | nuxt-icon | | BASE_DISABLE_PINIA | @pinia/nuxt | | BASE_DISABLE_PINIAPERSISTEDSTATE | @pinia-plugin-persistedstate/nuxt | | BASE_DISABLE_VUEUSE | @vueuse/nuxt | | BASE_DISABLE_I18N | @nuxtjs/i18n | | BASE_DISABLE_LODASH | nuxt-lodash | | BASE_DISABLE_IMAGE | @nuxt/image | | BASE_DISABLE_DAYJS | dayjs-nuxt |

License

MIT.