@alexsun-top/nuxt-base-layer

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
• Auto Animation
• Pinia & Pinia Plugin Persistedstate
• VueUse
• Nuxt i18n
• lodash
• dayjs
• Nuxt Image
• Nuxt Device

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_ANIMATE	@formkit/auto-animate/nuxt
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_DEVICE	@nuxtjs/device
BASE_DISABLE_DAYJS	dayjs-nuxt

License

MIT.