Nuxtの新規プロジェクト作成で毎回行っているような基本設定や便利な設定についてまとめました。基本的には自分のためのメモですが、これからNuxtを使ってWebサイトやWebアプリケーションを作りたいと考えている方はぜひ参考にしてみてください。
セットアップ
新規プロジェクト作成
npx nuxi@latest init <project-name>
ルーティング
/page内のルーティングを適用
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
pages配下に index.vue など、ディレクトリ構造でファイルを作成するとそれに合わせてルーティングされるようになります。
CSS
SCSSの導入
npm i sass
vueファイル内では下記のようにstyleを記述
<style scoped lang="scss">
.hoge {
}
</style>
リセットCSSの適用と共通CSSの設定
ここではdestyle.cssを使用しますが、他のリセットCSSでも同様に設定が可能です。
また下記のcommon.scssはbodyなど全ページで共通して適用するようなCSSを記述するファイルを想定しています。
npm i destyle.css
export default defineNuxtConfig({
css: [
'destyle.css', '~/assets/scss/common.scss'
],
}
SCSSの変数の利用
下記のように設定することで、どのファイルでも定義した変数やmixinを呼び出すことができます。
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "~/assets/scss/_variables.scss" as *;',
},
},
},
},
}
SEO関連
@nuxtjs/seo モジュールを導入する
npx nuxi module add @nuxtjs/seo
export default defineNuxtConfig({
modules: ["@nuxtjs/seo"],
site: {
url: process.env.BASE_URL,
name: "サイト名",
description: "サイトのデスクリプション",
defaultLocale: "ja",
trailingSlash: true,
},
)}
.envには下記のようにURLを設定しておきます。
BASE_URL=https://example.com
これ1つのモジュールで下記を対応することが可能
- metaタグの出力
- trailingSlashの適用
- サイトマップの生成
その他にも、適切に設定することでSchema.orgのやOG Imageなど細かな所まで設定可能ですが、ここでは最低限の説明に留めておきます。
アクセス解析
nuxt-gtag でGoogleアナリティクスのタグを設定
npx nuxi@latest module add gtag
export default defineNuxtConfig({
modules: ['nuxt-gtag'],
gtag: {
id: 'G-XXXXXXXXXX'
}
})
ESLintの設定
ESLintを導入することで、構文エラーを検出したり、自動でフォーマットしたりすることが可能に。VSCodeを使っている場合、拡張機能を使えば保存時に自動でフォーマットされるようになります。
詳しくは下記のページで解説しています。
おわりに
ここでは基本的に自分がどのプロジェクトでも設定するような内容をご紹介しました。
Linterの設定方法やNuxt Contentの設定方法などについては、別の機会にご紹介したいと思います。