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.
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',
],
},
},
})
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 |
MIT.