Nuxt3でページにstyleを適用する

Nuxt3でページにスタイルを指定する方法についてです。

Headタグ使う
useHeadを使う
app.headを使う
参考リンク

Headタグ使う

SFC内に以下のように記述する事でスタイル指定が可能です。

<template>
  <div>
    <Head>
      <Style children="body { background-color: green; }" />
      <Style>body { background-color: green; }</Style>
      <Link
        href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
        rel="stylesheet"
      />
    </Head>
  </div>
</template>

useHeadを使う

Composable APIを使ってscript setupに書くこともできます。

<script setup>
definePageMeta({
  layout: 'none',
})

useHead({
  script: [
    {
      src: '/js/three.min.js',
    },
  ],
  link: [
    {
      rel: "preconnect",
      href: "https://fonts.googleapis.com",
    },
  ],
  style: [{ children: 'html,body { margin: 0; width: 100%; height: 100%; overflow: hidden;}' }],
})
</script>

useHeadとLinkやStyleタグの両方を指定しても問題ないようです。両方の指定が出力されます。

app.headを使う

nuxt.config.tsで指定することもできます。

export default defineNuxtConfig({
  app: {
    head: {
      style: [{ children: "body { font-size: 2rem; }" }],
      link: [
        {
          rel: "stylesheet",
          href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css",
        },
      ],
    },
  },
});

Headタグ使う

useHeadを使う

app.headを使う

参考リンク

コメント