Nuxt 3 がリリースされました！ https://nuxt.com/v3 で詳細について見れます。
翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

コンポーネントディレクトリ

components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。

データの取得

コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。

$fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができます。

components/MountainsList.vue
<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

コンポーネントの探索

v2.13 以降、Nuxt はテンプレートで使用される時にコンポーネントを自動でインポートできます。この機能をアクティブにするには、構成を components: true と設定します：

nuxt.config.js
export default {
  components: true
}

~/componentsディレクトリにあるコンポーネントは、明示的にインポートしなくても、ページやレイアウト（および他のコンポーネント）全体で使用することができます。

| components/
--| TheHeader.vue
--| TheFooter.vue
layouts/default.vue
<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

動的インポート

コンポーネントを動的にインポートするには、コンポーネントの遅延読み込みともいわれる、Lazy プレフィックスをテンプレートに追加するだけです。

layouts/default.vue
<template>
  <div>
    <TheHeader />
    <Nuxt />
    <LazyTheFooter />
  </div>
</template>

lazy プレフィックスを使用すると、イベントが発火された時にコンポーネントを動的にインポートすることもできます。

pages/index.vue
<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

ネストされたディレクトリ

次のようにネストされたディレクトリにコンポーネントがある場合：

components/
  base/
      foo/
         CustomButton.vue

コンポーネント名は独自のパスディレクトリとファイル名に基づいています。したがってコンポーネントは次のようになります：

<BaseFooCustomButton />

ディレクトリ構造を保ったまま、<CustomButton /> として使用したい場合は、nuxt.config.js に CustomButton.vue のディレクトリを追加します。

nuxt.config.js
components: {
  dirs: [
    '~/components',
    '~/components/base/foo'
  ]
}

そして、 <BaseFooCustomButton /> の代わりに <CustomButton /> を使うことができます。

pages/index.vue
<CustomButton />
components モジュール についてはこちらをご覧ください。
このページをGitHubで編集する 更新日 Tue, Dec 6, 2022
Clément Ollivier Clément Ollivier Daniel Roe Daniel Roe Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Sébastien Chopin Sébastien Chopin Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss Xanzhu Xanzhu bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Lucas Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Ashimine Ikko Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti Marcello Bachechi Marcello Bachechi Rodolphe Rodolphe Thomas Underwood Thomas Underwood Shek Evgeniy Shek Evgeniy Lukasz Formela Lukasz Formela Hugo Torzuoli Hugo Torzuoli