npx nuxi@latest init src
mkdir @types
mkdir src
mkdir src/assets
mkdir src/components
mkdir src/composables
mkdir src/layouts
mkdir src/pages
mkdir src/plugins
mv public src
rm app.vue
touch .env
yarn

yarn add -D vuetify@latest sass pug dayjs @nuxtjs/i18n @mdi/font
mkdir src/assets/lang
touch src/assets/lang/ja.json
mkdir src/assets/styles
touch src/assets/styles/main.sass
touch src/assets/styles/customize.scss
touch src/plugins/vuetify.ts
touch src/pages/index.vue

// nuxt.config.ts

// <https://nuxt.com/docs/api/configuration/nuxt-config>
import { resolve } from 'path'

export default defineNuxtConfig({
  srcDir: 'src',
  modulesDir: [
    'node_modules',
    resolve(__dirname, '..', '..', 'node_modules'),
  ],
  devtools: { enabled: true },
  app: {
    head: {
      title: process.env.APP_NAME,
    },
  },
  modules: ['@nuxtjs/i18n',],
  i18n: {
    defaultLocale: 'ja',
    locales: [{ code: 'ja', iso: 'ja-JP', file: 'ja.json' }],
    langDir: 'assets/lang',
  },
  imports: {
    autoImport: true,
  },
  css: [
    '@/assets/styles/customize.scss',
    '@/assets/styles/main.sass',
  ],
  nitro: {
    prerender: {
      ignore: [
        '/200',
        '/404',
      ],
    },
  },
  vite: {
    ssr: {
      noExternal: [
        'vuetify',
      ],
    },
    build: {
      target: ['esnext'],
    },
  },
  build: {
    transpile: [/vuetify/],
  },
})

// plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import 'vuetify/styles';
import '@mdi/font/css/materialdesignicons.css'

export default defineNuxtPlugin((nuxtApp) => {
  // const config = useRuntimeConfig().public as any;
  const vuetify = createVuetify({
    ssr: true,
    components: {
      ...components,
    },
    icons: {
      iconfont: 'mdi', // default - only for display purposes
    },
    directives,
    display: {
      thresholds: {
        sm: 604,
      },
    },
  });

  // Vue.js で Vuetify を使用する
  nuxtApp.vueApp.use(vuetify);
});

// styles/main.sass

body
  font-family: Noto Sans JP

// styles/customize.scss

$family: 'Noto Sans JP', sans-serif;

// @use "@mdi/font/css/materialdesignicons.css";
@forward 'vuetify' with (
  $body-font-family: $family,
  $grid-breakpoints: (
    'xs': 0,
    'sm': 604px,
    'md': 960px,
    'lg': 1280px,
    'xl': 1920px,
    'xxl': 2560px,
  )
);

@import url('<https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap>');

// pages/index.vue

<template lang="pug">
h1 {{$t('pages.index.greeting')}}

</template>

<script setup lang="ts"></script>

<style scoped lang="sass"></style>

// layouts/default.vue

<template lang="pug">
v-app
  v-app-bar(color="primary")
    v-app-bar-title
  v-main()
    v-container.h-100(
      fluid
    )
      v-row(
        align="center"
        justify="center"
      )
        v-col.flex-grow-0
          slot
</template>

<script setup lang="ts">
</script>

<style scoped lang="sass">
</style>

// assets/lang/ja.json

// 空だとビルドでエラーになる

{
  "layout": {},
  "pages": {
    "index": {
      "greeting": "Hello World!!"
    }
  }
}

yarn dev

  "resolutions": {
    "string-width": "4.2.3"
  }