Closed4
Nuxtのプロジェクトをセットアップする
Nuxt
Tailwind CSS
Google Fonts
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;
}
ESLint + Prettier
ESLintの導入
設定どおり行い、テストで実行してみたところ以下のエラー。
$ 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の導入
Prettierと競合するESLintのルールを無効化する
最終的な設定ファイル
.eslintrc
{
"extends": ["@nuxtjs/eslint-config-typescript", "prettier"]
}
.prettierrc.json
特にこだわりがないので、いったんデフォルトとする
{}
Font Awesome
vitest
このスクラップは2023/11/20にクローズされました