Nuxt.js3 pageに作成したindex.vueをapp.vueで使用する

• 作成日 2024.05.27
• nuxt.js

Nuxt.js3でpageに作成したindex.vueをapp.vueで使用する手順を記述しておきます。NuxtPagetaguタグを使用します。

目次

• 1. 環境
• 2. index.vue作成

環境

• OS  ubuntu23.10
• node v20.13.1
• npm 10.8.0
• Nuxt.js v3.11.2

index.vue作成

まずは、以下のコマンドを実行するか直接作成するかして「pages」配下に「index.vue」を作成します。

$ npx nuxi add page index

「index.vue」が以下の内容で作成されます。

<script lang="ts" setup></script>

<template>
  <div>    
    Page: index
  </div>
</template>

<style scoped></style>

その後で「app.vue」に「NuxtPage」を追加します。

<template>
  <div>
    <h1>index.vueを表示</h1>
    <NuxtPage />
  </div>
</template>

これで、作成した「index.vue」が表示されるようになります。

実行結果

• 前の記事
  

  MariaDB 処理時間の長いクエリの上位を抽出する 2024.05.27

• 次の記事
  

  EXCEL 文字の位置を指定するショートカットキー 2024.05.27