CSSをレイアウトごとに切り替る

希望しているCSSの挙動

例えばレイアウトAで指定したCSSは、レイアウトAを使用するページでのみ反映されて、レイアウトBを使用する際には同じセレクタであってもレイアウトBのものを使用。 レイアウトAのスタイルは読み込みすらしないし、スタイルも適用されないようにしたい。

Scoped CSSを使ってみる

レイアウトやコンポーネントで<style>指定する時に「<style scoped>」のように「scoped」とつける方法です。

scopedを付けると何が起こるかというと、

<span class"bold" data-v-XXXXXXXXX>

という感じに「data-v-XXXXXXXXX」という属性がつき、CSSの方にも

.bold[data-v-XXXXXXXXX] {
  font-weight: bold;
}

といった感じに、属性が付与されるのでCSSの適用範囲を限定できます。

<Scoped CSSの良いところ>
ページやコンポーネント限定のCSSを指定する場合にはとても便利だと思います。

でもそもそもページやコンポーネントのスタイルはグローバルと言いつつグローバルになっていないっぽいのであまり意味がありません。

<Scoped CSSのダメなところ>
ページやコンポーネントはいいんですが、レイアウト。

レイアウトは「そのレイアウトを読みこんだページ」にもCSS適用してほしいところなんですが…。

「data-v-XXXXXXXXX」はレイアウトファイル内に書かれたタグだけに付与されます。 当然CSSもその範囲だけに適用されますが、コンポーネントや<Nuxt />の中へは一切影響しなくなります。

Nuxt.js公式マニュアルによると、splitChunksというオプションがあり、デフォルトではレイアウトのCSSはapp.jsに統合されるように設定されていたようです。
これをtrueにしてやると、無事にレイアウトのCSSもレイアウトごとに適用されるようになりました。

{
  layouts: false,
  pages: true,
  commons: true
}

外部CSSファイルの操作

外部CSS読み込みの設定

Nuxt.js公式マニュアルにやり方が載っていました。

ページ開いた状態ではindex.vueのソースが表示されているので左上のメニューボタンを押して「nuxt.config.js」を開くとコードが確認できます。

export default {
  css: [
    '~/css/main.css',
  ],
}

このコードで「css」フォルダの中にある「main.css」を読み込みます。

「css」フォルダは初期設定では存在しないので、「assets」フォルダで管理する場合はこう↓。

export default {
  css: [
    '~/assets/main.css',
  ],
}

こんな↓風にすると複数のCSSファイルを読み込むこともできます。

export default {
  css: [
    '~/css/main.css',
    '~/css/sub.css',
  ],
}

LINKタグで外部CSSを参照する方法

Nuxt.js公式マニュアルに説明がありました。

ただのLINKタグなのでFaviconの設定と同じやり方のようです。

export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
    ]
  }
}

＜ローカルのCSSを参照する場合の方法＞
まずは目的のCSSを「static」フォルダに入れます。
(「static\css\main.css」とします)

この場合は「href」の部分をこの↓ように書き換えます。

export default {
  head: {
    link: [
      { rel: 'stylesheet', href: '/css/main.css' }
    ]
  }
}

全てのCSSを外部CSSとして出力したい場合

レイアウトやindex.vue、コンポーネントに書かれているCSSを敢えて外部CSSとして出力する場合です。

Nuxt.js公式マニュアルによると、「nuxt.config.js」内の「build」プロパティに「extractCSS」を追加して「true」に設定する(デフォルトfalse)、とのことでした。

export default {
  build: {
    extractCSS: true,
  }
}

Faviconの設定を追加してみる

Favicon設定追加の例

全ページ共通の設定にする予定なので「nuxt.config.js」内に以下のコードを追加します。

export default {
  head: {
    meta: [
      { hid: 'msapplication-TileColor', name: 'msapplication-TileColor', content: '#333333' },
      { hid: 'theme-color', name: 'theme-color', content: '#333333' },
    ],
    link: [
      { hid: 'icon', rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { hid: 'apple-touch-icon', rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { hid: 'icon32', rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { hid: 'icon16', rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { hid: 'manifest', rel: 'manifest', href: '/site.webmanifest' },
    ]
  },
}

既にあった「head」プロパティ内の「meta」「link」プロパティにそれぞれ追記しました。
あと、せっかくなのでhid指定もしてみました。

lang属性を設定してみる

Nuxt.jsでHTMLタグに言語設定を追加する

headプロパティ以下に「htmlAttrs」プロパティを追加してみます。

export default {
  (略)
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: process.env.npm_package_name || '',
    (略)
  },
  (略)
}

lang属性を指定するファイルはどれ？

今回は「nuxt.config.js」に設定しました。

もしページによって言語を変える場合は、index.vueなどのページ毎にも指定できることを確認しています。

<script>

export default {
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: (ページのタイトル),
    meta: [
      { hid: 'description', name: 'description', content: (ページの説明) }
    ],
  },
}

</script>

TypeScriptの場合はこう↓。

<script lang="ts">

import Vue from 'vue'

export default Vue.extend({
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: (ページのタイトル),
    meta: [
      { hid: 'description', name: 'description', content: (ページの説明) },
    ],
  },
})

</script>

Nuxt.jsでcanonical設定しようとしたら死ぬほどハマった

Nuxt.jsでcanonicalはどこに指定するのか

読み込まれるファイルならけっこうどこでもいけそうです。

nuxt.config.js、index.vue、Layoutなど。
効率的にcanonicalを指定することを考えると、全ページで必ず読み込まれるだろうし、既にLINKタグの設定項目もあったということでnuxt.config.jsが良さそうです。

＜nuxt.config.jsにcanonicalを書き足してみた＞

{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'canonical', href: 'https://dev.ore-shika.com/' },

＜現在のURLを取得するための記述例＞
　・Nuxt.jsでcanonicalを自動設定する場合は「headプロパティ」ではなく「headメソッド」を使う。
　・nuxt.config.jsに設定を追加するなど、既にheadプロパティがある場合は、プロパティの内容を全て
　　メソッド側に移植する必要がある。

<script>

export default {
  head () {
    return {
      link: [
        { rel: 'canonical', href: (トップページのURL) + `${this.$route.path}` },
      ],
    }
  },
}

</script>

nuxt.config.jsでプロパティの内容を全てメソッド側に移植した場合の例

export default {
  head () {
    return {
      title: (タイトル名),
      meta: [
        { name: 'description', content: (ページの説明) },
        { rel: 'canonical', href: (トップページのURL) + `${this.$route.path}` },
      ]
    }
  }
}

layoutsの機能について

Nuxt.jsには「layouts」という機能があるようで、調べてみると「コンテンツ部分以外の共通レイアウト」を用意する機能のようです。

ヘッダやフッタ、サイドバーなどをここに記述しておけば、各ページのvueファイルではメインの部分だけ書けばいいようになるというわけです。

特に指定しなかった場合は「layouts」フォルダにある「default.vue」を参照するようなので、default.vueの中身を見てみます。

<template>
  <div>
    <Nuxt />
  </div>
</template>

非常にシンプルです。
これは全ページ共通で読み込まれる雛形のように振る舞っているので、ヘッダ、フッタ、サイドバーなどを配置しておくことができます。

<template>
  <div>
    <header></header>
    <Nuxt />
    <div class="sidebar"></div>
    <footer></footer>
  </div>
</template>

このようにレイアウトで共通パーツを指定しておくと、各ページでいちいち共通パーツを呼び出す必要がありません。

ページの追加とリンク作成

ページを増やすには？

インストールフォルダにできた「pages」フォルダが各ページのデータです。
index.vueをコピペして「test.vue」を作ってみます。

どうやってアクセスするんだろう？
URLに「/test/」足せばいいのか？



できました。

＜サブフォルダに置いてみた＞
解説サイトではよくサブフォルダを作ってページを追加しているので、同じようにやってみました。

「test」というフォルダを作って先ほどの「test.vue」を移動。 名前を「index.vue」に変更。

同じ「/test/」というURLで問題なく表示されました。

増やしたページへリンクを貼るには？

＜普通にAタグを使ってみた＞
<a href="/test/">テストページへ</a>
問題なく動きました。

＜nuxt-linkを使ってみた＞
Nuxt.js専用の「nuxt-link」というタグがあるようなので使ってみました。
<nuxt-link to="/test/">テストページへ</nuxt-link>
もちろんちゃんと機能します。

nuxt-linkタグはほとんどAタグと同じようなもので、違いは「href」の代わりに「to」でURL指定することくらい。

Aタグで指定できるようなclass指定、title設定、「target=”_blank”」、「rel=”noopener”」なんかもAタグと同じように設定するだけで機能しています。
<nuxt-link to="/test/" class="red" target="_blank" rel="noopener">

＜ページ間の移動は？＞
Nuxt.jsの機能ではないですが、パスの指定方法。 Aでもnuxt-linkでも同じ挙動でした。
//トップページへ
<a href="/">
<nuxt-link to="/">
//テストページへ
<a href="/test/">
<nuxt-link to="/test/">
//今の階層からの相対URL
<a href="./test/">
<nuxt-link to="./test/">
//今の階層からのひとつ上の階層へ
<a href="../">
<nuxt-link to="../">

関連記事:

Nuxt.js、Vue.jsによるToDoのサンプル マークダウンを表示するサンプル ダッシュボード(ADMIN) Nuxt.js テクニック Nuxt.js -jsonからEXCELファイル作成  Nuxt.js(Vue.js)の「v-for」でコンポーネントをループさせる方法 v-forを指定回数でループさせ、なおかつ配列へアクセスする(Nuxt.js/Vue.js) Nuxt.js初心者がハンバーガーメニューを実装しながらv-onとかv-ifを学ぶ Nuxt.js Excelファイルを読み込む Vue3でTypeScript実践 ECサイト構築例 Nuxt.js + Vue.js LP構築例 Nuxt.js + Vue.js Nuxt.jsの特徴やメリット Nuxt.js 入門 (1) – 最初の一歩 Nuxt.js 入門 (2) – プロジェクト作成 簡単な例で始めるVue3でTypeScript入門 【Nuxt.js】Nuxt.jsでJSONファイル表示