Nuxt.js 3 Setup Notes

I find myself setting up various nuxt.js projects lately. These are some of the notes for getting a quick setup going.

Not much fluff for this one just raw notes.

Base installation

https://nuxt.com/docs/getting-started/installation

pnpm dlx nuxi@latest init PN
cd PN
pnpm i -D sass
mkdir layouts pages components

echo "<template>
  <div>
    <NuxtRouteAnnouncer/>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>" > app.vue

echo "<template>
  <div>
    <slot/>
  </div>
</template>

<script setup>

</script>" > layouts/default.vue


echo "<template>
<div>Hello World</div>
</template>

<script setup>

</script>" > pages/index.vue

Nuxt plugins

# Icons from https://iconify.design/
# Module: https://nuxt.com/modules/icon
npx nuxi module add icon

# Install icon sets:
npm i -D @iconify-json/collection-name

# Nuxt Image https://image.nuxt.com/
npx nuxi@latest module add image

# Nuxt Content https://content.nuxt.com/
npx nuxi@latest module add content

# Automatic google font handling (downloads locally!)
# https://google-fonts.nuxtjs.org/
npx nuxi@latest module add google-fonts

# i18n: 
npx nuxi@latest module add i18n

# Pinia (not available by default)
# https://nuxt.com/modules/pinia
npm i @pinia/nuxt

Favicon

Creator: https://favicon.io/

Put the favicons in a subdirectory of public/.

Edit nuxt.config.ts:

    app: {
        head: {
            link: [
                {rel: 'icon', type: 'image/png', href: '/favicon/favicon-32x32.png'}
            ],
        }
    },

Tailwind Integration

https://tailwindcss.com/docs/guides/nuxtjs

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Create assets/css/nexus.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

Edit nuxt.config.js:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/nexus.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Custom Icons

Icons module https://nuxt.com/modules/icon uses https://iconify.design/

Create an icons dir for the project and put all svg files in there:

mkdir assets/icons/project

edit nuxt.config.ts to integrate custom icons:

export default defineNuxtConfig({
  modules: [
    'nuxt-icon'
  ],
  icon: {
    customCollections: [
      {
        prefix: 'project',
        dir: './assets/icons/project'
      },
    ],
  },
})

Google font integration

https://google-fonts.nuxtjs.org/getting-started/setup is a great plugin to use google fonts as it supports downloading fonts locally into the project instead of linking it.

npx nuxi@latest module add google-fonts

Edit nuxt.config.ts:

...
    googleFonts: {
        families: {
            Roboto: true,
        }
    },
...

(see link above for better docs)

To make it a default font in tailwind edit tailwind.config.js:

export default {  
    theme: {  
        extend: {  
            colors: {  
                fontFamily: {  
                    roboto: ['"Roboto"', "sans-serif"],  
                    // Add more custom font families as needed  
                },
                ...

Integrate i18n

https://i18n.nuxtjs.org/ uses vue.js i18n to create a really compelling multi language setup

Edit nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts' // if you are using custom path, default
  }

Create i18n.config.ts:

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

Adding prebuild hook

An easy way is to create a prebuild script in package.json:

...
  "scripts": {
    "prebuild": "node prebuild.cjs",
    "build": "nuxt build",
    "dev": "nuxt dev",
    ...
  },
...

Using .cjs turns the script into a common JS script capable of using bare node.js.