@mathix420/nuxt-layer

Opinionated Nuxt Starter Layer

Quickly start your Nuxt project with the best modules and tooling.

• @nuxt/content
• @nuxtjs/mdc
• @nuxt/scripts
• @nuxtjs/seo
• @nuxt/fonts
• @nuxt/image
• nuxt-headlessui
• @nuxtjs/tailwindcss
  • Blank config
  • With Plugins:
    • @tailwindcss/typography
    • @tailwindcss/forms
    • @tailwindcss/aspect-ratio
    • tailwind-scrollbar-hide
• @nuxt/icon
• @nuxt/eslint
  • With stylistic preferences and a few rules
  • With eslint-plugin-tailwindcss

Get started

Install the layer with your preferred package manager.

bun i @mathix420/nuxt-layer
# or
npm i @mathix420/nuxt-layer

Update your nuxt config to extend from this layer.

export default defineNuxtConfig({
  extends: [
    "@mathix420/nuxt-layer",
  ]
})

Generate typings and init modules.

bunx nuxi prepare
# or
npx nuxi prepare

Load eslint presets.

# may not be needed anymore
bun pm trust @mathix420/nuxt-layer

// eslint.config.mjs
// @ts-check
// @ts-ignore
import cfg from "@mathix420/nuxt-layer/eslint.config.mjs";
import withNuxt from "./.nuxt/eslint.config.mjs";

export default withNuxt(
  cfg,
  {
    settings: {
      tailwindcss: {
        config: ".nuxt/tailwind/postcss.mjs",
      },
    },
  },
);

Copy VS Code settings, be careful they'll be overwritten.

cp -r node_modules/@mathix420/nuxt-layer/.vscode .

Migrate to nuxt v4.

export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
})

bunx codemod@latest nuxt/4/migration-recipe

Setup renovate

renovate.json:

{
    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
    "extends": [
        "github>mathix420/nuxt-layer"
    ]
}

Dev

Setup

Make sure to install dependencies:

bun install

Development Server

Start the development server on http://localhost:3000:

bun dev

Upgrade deps

bunx npm-check-updates -i --format group

Check out the Nuxt layer documentation for more information.