Closed4

Nuxtのプロジェクトをセットアップする

DaikiDaiki

Nuxt

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

Tailwind CSS

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

Google Fonts

https://fonts.google.com/?subset=japanese&noto.script=Jpan

nuxt.config.tsに追加

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ...
  app: {
    head: {
      // ...
      link: [
        { rel: "preconnect", href: "https://fonts.googleapis.com" },
        {
          rel: "preconnect",
          href: "https://fonts.gstatic.com",
          crossorigin: "",
        },
        {
          rel: "stylesheet",
          href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap",
        },
      ],
    },
  },
});

main.css

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
}
DaikiDaiki

ESLint + Prettier

ESLintの導入

https://github.com/nuxt/eslint-config#typescript

設定どおり行い、テストで実行してみたところ以下のエラー。

$ yarn lint
yarn run v1.22.19
$ eslint .

Oops! Something went wrong! :(

ESLint: 8.48.0

Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc » @nuxtjs/eslint-config-typescript': Cannot find module 'typescript'

TypeScriptインストールし成功するようになった。

yarn add -D typescirpt

Prettierの導入

https://prettier.io/docs/en/install

Prettierと競合するESLintのルールを無効化する

https://zenn.dev/kohski/articles/eslint-prettier-integration

最終的な設定ファイル

.eslintrc

{
  "extends": ["@nuxtjs/eslint-config-typescript", "prettier"]
}

.prettierrc.json
特にこだわりがないので、いったんデフォルトとする

{}
このスクラップは5ヶ月前にクローズされました