【ゼロから学ぶNuxt3×Typescript】②nuxt3でcomponentを作成

Nuxt３×TypeScript 学習

下記の参考サイトを見ながら、Nuxt３とTypescriptを学ぶ第二回。

▼　神回|vue3.js nuxt3 typescriptどうやる？【ゼロから解説】

前回はこちら👇

では始めます💪

Nuxt3でcomponentを作成する

1.header.vueを作成する

pagesフォルダと同階層にcomponentsフォルダを作成、その中にheader.vueを作成

・header.vue

<template>
  <header class="header">
    <h1>ヘッダータイトル</h1>
  </header>
</template>

<style>
.header {
  background-color: peachpuff;
  color: #fff;
  display: flex;
}
</style>

2.footer.vueを作成する

同じくcomponentsフォルダの中にfooter.vueを作成

・footer.vue

<template>
  <footer>
    フッター
  </footer>
</template>

3.app.vueでコンポーネントを呼び出す

<Header />のように頭文字が大文字になる点に注意

・app.vue

<template>
  <Header />
  <NuxtPage />
  <Footer />
</template>

4.localhost:3000を確認

5.jobsフォルダの中にページを作成する

pages配下にjobsフォルダを作成
さらに、jobsフォルダの中に下記ファイルを作成
・index.vue
　↪︎localhost:3000/jobs
・[id].vue
　↪︎localhost:3000/jobs/1等

6.pages配下にprefecturesフォルダを作成する

prefecturesフォルダ内に [prefecture].vue を作成

---

参考サイトでは、ここでyarn devすると下記サイトが見られるとありますが、
http://localhost:3000/prefectures/pref

こちらの環境ではターミナルに下記エラーが出ました。
（実は前回も出ていました）

At least one <template> or <script> is required in a single file component.

翻訳

単一のファイル コンポーネントには、少なくとも 1つの <template> または <script> が必要です。

作成したvueファイル内が空なのがよろしくないようです。
指示通りに<template> <script> を書きます。

・jobs/index.vue
・jobs/[id].vue
・prefectures/[prefecture].vue

<template>

</template>

もう一度yarn devするとエラーが消えます。

---

7.ページを確認

下記にアクセスする
http://localhost:3000/jobs
http://localhost:3000/jobs/hoge
http://localhost:3000/prefectures/pref

※混乱を避けるための補足
この参考サイトでは求人サイトを作成する過程を題材としているため「prefecture＝県」としているようです。
（⚪︎⚪︎県の求人、というイメージ）

[id].vue、[prefecture].vueの中の[]で囲まれている部分は動的な値が入ります。

例えば、jobs/hogehugaやprefectures/monyomonyoでも上記添付画像と同じように表示されます。

第二回はここまで

参考サイト