スタイル設定

Nuxt アプリケーションをスタイリングする方法を学びます。

Nuxt はスタイリングに関して非常に柔軟です。独自のスタイルを作成したり、ローカルおよび外部スタイルシートを参照したりできます。CSS プリプロセッサ、CSS フレームワーク、UI ライブラリ、Nuxt モジュールを使用してアプリケーションをスタイリングできます。

ローカルスタイルシート

ローカルスタイルシートを作成する場合、それらを配置する最適な場所は app/assets/ ディレクトリです。

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

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

app/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>

スタイルシートは Nuxt によってレンダリングされた HTML にインラインで埋め込まれます。

CSS プロパティ

Nuxt の設定で css プロパティを使用することもできます。スタイルシートの最適な場所は app/assets/ ディレクトリです。そのパスを参照すると、Nuxt はアプリケーションのすべてのページにそれを組み込みます。

nuxt.config.ts

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

スタイルシートは Nuxt によってレンダリングされた HTML にインラインで埋め込まれ、グローバルに注入され、すべてのページに存在します。

フォントの操作

ローカルのフォントファイルを 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

yarn add animate.css

pnpm install animate.css

bun install animate.css

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

app/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 セクションにリンク要素を追加することで、外部スタイルシートをアプリケーションに含めることができます。この結果は、さまざまな方法で達成できます。ローカルスタイルシートもこの方法で含めることができることに注意してください。

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 に値を動的に設定できます。

Docs > 4 X > 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.dev.

プリプロセッサの使用

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

npm install -D sass

npm install -D less

npm install -D stylus

スタイルシートを作成する最適な場所は app/assets ディレクトリです。その後、プリプロセッサの構文を使用して、app.vue (またはレイアウトファイル) にソースファイルをインポートできます。

app/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'],
})

どちらの場合も、コンパイルされたスタイルシートは Nuxt によってレンダリングされた HTML にインラインで埋め込まれます。

色変数を含む Sass パーシャルなど、プリプロセスされたファイルにコードを注入する必要がある場合は、Vite のSass パーシャルでそれを行うことができます。プリプロセッサオプション.

app/assets ディレクトリにパーシャルを作成します。

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

$primary: #49240F
$secondary: #E4A79D

次に、nuxt.config で

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

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          additionalData: '@use "~/assets/_colors.sass" as *\n',
        },
      },
    },
  },
})

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

プリプロセッサワーカー (実験的)

Vite は実験的なオプションを提供しており、プリプロセッサの使用を高速化できます。

これは nuxt.config で有効にできます。

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

これは実験的なオプションであり、Vite のドキュメントを参照し、フィードバックを提供.

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

Vue と SFC の最も良い点の 1 つは、スタイリングを自然に処理できることです。コンポーネントファイルのスタイルブロックに CSS またはプリプロセッサコードを直接記述できるため、CSS-in-JS のようなものを使用せずに素晴らしい開発体験が得られます。ただし、CSS-in-JS を使用したい場合は、Pinceau.

などのサポートするサードパーティライブラリとモジュールを見つけることができます。Vue ドキュメントで、SFC でのコンポーネントのスタイリングに関する包括的なリファレンスを参照できます。

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

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 :class="classObject" />
</template>

<script setup lang="ts">
const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  'active': isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal',
}))
</script>

<template>
  <div :class="classObject" />
</template>

<script setup lang="ts">
const isActive = ref(true)
const errorClass = ref('text-danger')
</script>

<template>
  <div :class="[{ active: isActive }, errorClass]" />
</template>

<script setup lang="ts">
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = reactive({ color: 'red', fontSize: '13px' })
</script>

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }" />
  <div :style="[baseStyles, overridingStyles]" />
  <div :style="styleObject" />
</template>

については、Vue ドキュメントをご覧ください。

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

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

<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 モジュール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 ファイルを組み込みでサポートしています。最初にインストールするだけで、lang 属性を使用して SFC で直接利用できるようになります。

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

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

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

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

などのサポートするサードパーティライブラリとモジュールを見つけることができます。Vite CSS ドキュメントおよび@vitejs/plugin-vue ドキュメントを参照してください。webpack ユーザーはvue loader ドキュメント.

を参照してください。

PostCSS の使用

nuxt.config.ts

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

Nuxt には PostCSS が組み込まれています。これは nuxt.config ファイルで設定できます。

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

SFC での適切な構文ハイライト表示には、postcss lang 属性を使用できます。

デフォルトでは、Nuxt には以下のプラグインがプリ設定されています。postcss-import
: @import ルールを改善します。postcss-url
: url() ステートメントを変換します。autoprefixer
: ベンダープレフィックスを自動的に追加します。cssnano

: 縮小とパージ

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

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

<style>
.default-layout {
  color: red;
}
</style>

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

Docs > 4 X > Guide > Directory Structure > App > Layouts で詳細をご覧ください。

サードパーティライブラリとモジュールNuxt はスタイリングに関して意見がなく、さまざまなオプションを提供します。UnoCSS のような人気のあるライブラリなど、好きなスタイリングツールを使用できます。またはTailwind CSS.

UnoCSS

コミュニティと Nuxt チームは、統合を容易にするために多くの Nuxt モジュールを開発しました。これらはウェブサイトのモジュールセクションで見つけることができます。ここでは、始めるのに役立ついくつかのモジュールを紹介します。
UnoCSS: オンデマンドアトミック CSS エンジン
Tailwind CSS: ユーティリティファースト CSS フレームワークFontaine
: フォントメトリックフォールバックPinceau
Nuxt UI: 適応型スタイリングフレームワーク
: 最新のウェブアプリ用 UI ライブラリPanda CSS

: ビルド時にアトミック CSS を生成する CSS-in-JS エンジン

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

使用できますWeb フォントを簡単にロードNuxt Google Fonts モジュール

を使用して Google Fonts をロードします。Nuxt はスタイリングに関して意見がなく、さまざまなオプションを提供します。UnoCSS のような人気のあるライブラリなど、好きなスタイリングツールを使用できます。使用している場合、ウェブフォントプリセットが付属しており、Google Fonts など一般的なプロバイダからフォントを便利にロードできることに注意してください。

高度な設定

トランジション

Nuxt には Vue と同じ <Transition> 要素があり、実験的な View Transitions API もサポートしています。

Docs > 4 X > Getting Started > Transitions で詳細をご覧ください。

フォントの高度な最適化

CLS を削減するために、Tailwind CSS: ユーティリティファースト CSS フレームワークを使用することをお勧めします。より高度なものが必要な場合は、ビルドプロセスまたは Nuxt ランタイムを拡張する Nuxt モジュールの作成を検討してください。CLSを削減するために、

アプリケーションのスタイリングをより簡単かつ効率的にするために、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)
          }
        }
      }
    },
  },
})

お役に立ちましたか？

問題を報告またはGitHub でこのページを編集

アセット

Nuxt はアセットに関して 2 つのオプションを提供します。

ルーティング

Nuxt のファイルシステムルーティングは、pages/ ディレクトリ内のすべてのファイルに対してルートを作成します。