nuxt logo

ドキュメント翻訳（非公式）

Nuxt.js
Version:v3.17

スタイリング

Nuxtアプリケーションのスタイリング方法を学びましょう。

Nuxtはスタイリングに関して非常に柔軟です。自分自身のスタイルを書くか、ローカルおよび外部のスタイルシートを参照してください。 CSSプリプロセッサ、CSSフレームワーク、UIライブラリ、そしてNuxtモジュールを使用してアプリケーションをスタイルすることができます。

ローカルスタイルシート

ローカルスタイルシートを書く場合、自然な配置場所はassets/ディレクトリです。

コンポーネント内でのインポート

ページ、レイアウト、コンポーネントで直接スタイルシートをインポートできます。 JavaScriptのインポートを使用するか、CSSの@importステートメントを使用できます。

pages/index.vue
<script>
// Use a static import for server-side compatibility
import '~/assets/css/first.css'

// Caution: Dynamic imports are not server-side compatible
import('~/assets/css/first.css')
</script>

<style>
@import url("~/assets/css/second.css");
</style>

The stylesheets will be inlined in the HTML rendered by Nuxt.

CSSプロパティ

また、Nuxt設定のcssプロパティを使用することもできます。 スタイルシートの自然な配置場所はassets/ディレクトリです。そのパスを参照して、Nuxtがアプリケーションのすべてのページにそれを含めるようにします。

nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

The stylesheets will be inlined in the HTML rendered by Nuxt, injected globally and present in all pages.

フォントの扱い

ローカルフォントファイルを~/public/ディレクトリに配置します。例えば~/public/fontsにします。その後、url()を使用してスタイルシートでそれらを参照できます。

assets/css/main.css
@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

その後、スタイルシート、ページ、またはコンポーネントでフォントを名前で参照します：

<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>

NPMを通じて配布されるスタイルシート

npmを通じて配布されるスタイルシートも参照できます。例として人気のあるanimate.cssライブラリを使用しましょう。

npm install animate.css

その後、ページ、レイアウト、コンポーネントで直接参照できます：

app.vue
<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

パッケージは、Nuxt設定のcssプロパティで文字列としても参照できます。

nuxt.config.ts
export default defineNuxtConfig({
  css: ['animate.css']
})

外部スタイルシート

nuxt.configファイルのheadセクションにlink要素を追加することで、アプリケーションに外部スタイルシートを含めることができます。この結果は異なる方法で達成できます。ローカルスタイルシートもこのように含めることができます。

Nuxt設定のapp.headプロパティを使用してheadを操作できます：

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
    }
  }
})

動的にスタイルシートを追加する

useHeadコンポーザブルを使用して、コード内でheadに値を動的に設定できます。

こちらも参照 api > composables > use-head 
useHead({
  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})

Nuxtは内部でunheadを使用しており、その完全なドキュメントを参照できます。

NitroプラグインでレンダリングされたHeadを変更する

より高度な制御が必要な場合は、レンダリングされたhtmlをフックでインターセプトし、プログラム的にheadを変更するプラグインを作成できます。

~/server/plugins/my-plugin.tsにこのようなプラグインを作成します：

server/plugins/my-plugin.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook('render:html', (html) => {
    html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
  })
})

外部スタイルシートはレンダリングをブロックするリソースです：ブラウザがページをレンダリングする前にロードおよび処理する必要があります。不必要に大きなスタイルを含むWebページはレンダリングに時間がかかります。これについてはweb.devでさらに読むことができます。

プリプロセッサの使用

SCSS、Sass、Less、またはStylusのようなプリプロセッサを使用するには、まずそれをインストールします。

npm install -D sass

スタイルシートを書く自然な場所はassetsディレクトリです。 プリプロセッサの構文を使用して、app.vue（またはレイアウトファイル）でソースファイルをインポートできます。

pages/app.vue
<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

または、Nuxt設定のcssプロパティを使用することもできます。

nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss']
})

In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.

プリプロセスされたファイルにコードを注入する必要がある場合、例えば色変数を含むSass partialの場合、Viteのpreprocessors optionsを使用して行うことができます。

assetsディレクトリにいくつかのパーシャルを作成します：

$primary: #49240F;
$secondary: #E4A79D;

その後、nuxt.configで：

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

NuxtはデフォルトでViteを使用します。webpackを使用したい場合は、各プリプロセッサローダーのドキュメントを参照してください。

プリプロセッサワーカー（実験的）

Viteは、プリプロセッサの使用を速める実験的なオプションを提供しています。

nuxt.configでこれを有効にできます：


export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorMaxWorkers: true // number of CPUs minus 1
    }
  }
})

This is an experimental option and you should refer to the Vite documentation and provide feedback.

シングルファイルコンポーネント (SFC) のスタイリング

VueとSFCの最大の特徴の一つは、スタイリングを自然に扱うことができる点です。コンポーネントファイルのスタイルブロックに直接CSSまたはプリプロセッサのコードを書くことができるため、CSS-in-JSのようなものを使用せずに素晴らしい開発者体験を得ることができます。しかし、CSS-in-JSを使用したい場合は、pinceauなど、それをサポートするサードパーティのライブラリやモジュールを見つけることができます。

SFCでのコンポーネントのスタイリングについては、Vueのドキュメントを参照してください。

クラスとスタイルのバインディング

Vue SFCの機能を活用して、クラスとスタイル属性でコンポーネントをスタイリングできます。

<script setup lang="ts">
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>
</template>

詳細については、Vueのドキュメントを参照してください。

v-bindを使った動的スタイル

スタイルブロック内でJavaScriptの変数や式をv-bind関数を使って参照できます。 バインディングは動的であり、変数の値が変わるとスタイルも更新されます。

<script setup lang="ts">
const color = ref("red")
</script>

<template>
  <div class="text">hello</div>
</template>

<style>
.text {
  color: v-bind(color);
}
</style>

スコープ付きスタイル

scoped属性を使用すると、コンポーネントを隔離してスタイルを設定できます。この属性で宣言されたスタイルは、このコンポーネントにのみ適用されます。

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

CSSモジュール

CSS Modulesをmodule属性で使用できます。注入された$style変数でアクセスします。

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

プリプロセッサのサポート

SFCのスタイルブロックはプリプロセッサの構文をサポートしています。Viteは設定なしで.scss、.sass、.less、.styl、.stylusファイルをサポートしています。まずはインストールする必要がありますが、その後はSFCでlang属性を使って直接使用できます。

<style lang="scss">
  /* Write scss here */
</style>

Vite CSSのドキュメントや@vitejs/plugin-vueのドキュメントを参照してください。 webpackを使用している場合は、vue loaderのドキュメントを参照してください。

PostCSSの使用

Nuxtはpostcssを内蔵しています。nuxt.configファイルで設定できます。

nuxt.config.ts
export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-custom-media': {}
    }
  }
})

SFCで適切なシンタックスハイライトを使用するには、postcss lang属性を使用できます。

<style lang="postcss">
  /* Write postcss here */
</style>

デフォルトでは、Nuxtには以下のプラグインが事前に設定されています：

複数のスタイルのためのレイアウトの活用

アプリケーションの異なる部分を完全に異なるスタイルでスタイリングする必要がある場合、レイアウトを使用できます。 異なるレイアウトに異なるスタイルを使用します。

<template>
  <div class="default-layout">
    <h1>Default Layout</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>
こちらも参照 guide > directory-structure > layouts

サードパーティのライブラリとモジュール

Nuxtはスタイリングに関しては非常に柔軟で、多様なオプションを提供しています。UnoCSSやTailwind CSSのような人気のあるライブラリを使用することができます。

コミュニティとNuxtチームは、統合を容易にするために多くのNuxtモジュールを開発しています。 ウェブサイトのモジュールセクションでそれらを発見できます。 始めるためのいくつかのモジュールはこちらです：

  • UnoCSS: 即時オンデマンドのアトミックCSSエンジン
  • Tailwind CSS: ユーティリティファーストのCSSフレームワーク
  • Fontaine: フォントメトリックのフォールバック
  • Pinceau: 適応可能なスタイリングフレームワーク
  • Nuxt UI: モダンなウェブアプリ用のUIライブラリ
  • Panda CSS: ビルド時にアトミックCSSを生成するCSS-in-JSエンジン

Nuxtモジュールはすぐに使える良い開発者体験を提供しますが、お気に入りのツールにモジュールがない場合でも、Nuxtで使用することができます！ 自分のプロジェクト用に自分で設定することができます。ツールによっては、Nuxtプラグインを使用するか、自分のモジュールを作成する必要があります。それを行ったら、コミュニティと共有してください！

Webフォントの簡単な読み込み

the Nuxt Google Fonts moduleを使用してGoogle Fontsを読み込むことができます。

UnoCSSを使用している場合、Google Fontsやその他の一般的なプロバイダーからフォントを便利に読み込むためのweb fonts presetsが付属していることに注意してください。

上級

トランジション

NuxtはVueが持っている同じ<Transition>要素を持っており、実験的なView Transitions APIもサポートしています。

こちらも参照 getting-started > transitions

フォントの高度な最適化

CLSを減らすために、Fontaineの使用をお勧めします。もっと高度なものが必要な場合は、ビルドプロセスやNuxtランタイムを拡張するためにNuxtモジュールを作成することを検討してください。

Webエコシステム全体で利用可能なさまざまなツールや技術を活用して、アプリケーションのスタイリングをより簡単かつ効率的に行うことを忘れないでください。ネイティブCSS、プリプロセッサ、postcss、UIライブラリ、またはモジュールを使用している場合でも、Nuxtはあなたをサポートします。ハッピーなスタイリングを！

LCPの高度な最適化

グローバルCSSファイルのダウンロードを速めるために、以下のことを行うことができます：

  • ファイルがユーザーに物理的に近い場所にあるようにCDNを使用する
  • Brotliを使用してアセットを圧縮する
  • 配信にHTTP2/HTTP3を使用する
  • アセットを同じドメインにホストする（異なるサブドメインを使用しない）

これらのことは、Cloudflare、Netlify、Vercelのような現代のプラットフォームを使用している場合、自動的に行われるべきです。 LCP最適化ガイドはweb.devで見つけることができます。

NuxtによってすべてのCSSがインライン化されている場合、実験的にレンダリングされたHTMLで外部CSSファイルの参照を完全に停止することができます。 それを実現するためのフックをモジュールに配置するか、Nuxt設定ファイルに配置することができます。

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // find the app entry, css list
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        // start from the end of the array and go to the beginning
        for (let i = css.length - 1; i >= 0; i--) {
          // if it starts with 'entry', remove it from the list
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/getting-started/styling