Nuxt3でwebページを作る手順（移管済）

全5回のうち1つ目です。

Nuxt3アプリ立ち上げ

// アプリケーションフォルダに移動後
$ npx nuxi init .
// パッケージ依存の作成
$ yarn install

ここで以下のようなフォルダ構成になっているはずです。

.
├── README.md
├── app.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock

起動して、ページが立ち上がることを確認しましょう。

$ yarn dev

Nuxt CLI v3.0.0-27307420.6a25d3e

  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.2:3000/

ℹ Vite warmed up in 645ms
✔ Vite server built in 1038ms
✔ Nitro built in 147 ms

ここで見ているのは、app.vueに書かれている内容です

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

pagesとcomponentsの作成

nuxt2では立ち上げと同時にlayoutsやpagesが作成されましたが、nuxt3ではそういった世話はしてくれず自分で作ることになります。

個人的には、デフォルトで作られるlayouts/defaultから不要なタグを削除したりinspireページを削除するのが手間だったため、これらのページが自動で作られなくなってよかったと思います。

といってもこのままでは何から手をつけていいかわからないので、最低限の構成を作りましょう。

pagesにindexとaboutという二つのファイルを作ります

pages
├── about.vue
└── index.vue

pages/index.vue

<template>
    <h1>This is index Page</h1>
</template>

pages/about.vue

<template>
    <h1>This is about Page</h1>
</template>

このままでは反映されないで、app.vueのNuxtWelcomeを書き換えます

<template>
  <div>
    <NuxtPage />
  </div>
</template>

これでlocalhost:3000/aboutでaboutページが表示されるはずです。

レイアウトを作る

もうちょっと現実的なページにしていくために、ヘッダーとサイドバーをつけます。
（ただし、本番のデザインはTailwindやVuetifyで作りあげますので、ここでは最小限のCSSで記述します）

まずはページの見た目

app.vue

<template>
  <div>
    <Header class="header" /> 
    <div class="middle">
      <Navigation class="navigation" />
      <NuxtPage class="main"/>
    </div>
  </div>
</template>

<style>
.header{
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 1;
}

.middle{
    position:absolute;
    top:50px;
    display:flex
}

.navigation{
    position: fixed;
    height: 100%;
    width:150px;
}

.main{
    position: relative;
    left:150px
}
</style>

components/Header.vue

 <template>
    <div class="header">
        <h1>タイトル</h1>
    </div>
</template>

<style>
.header{
    background-color:blue;
    color: aliceblue;
    display:flex;
}
</style>

components/Navigation.vue

<template>
<div class="navigation">
    <ul>
        <li>インデックス</li>
        <li>アバウト</li>
    </ul>    
</div>

</template>

<style>
.navigation{
    background-color:lightgrey;
    padding: 12px;
}
</style>

pages/index.vue

<template>
    <div>
        <h1>This is index Page</h1>
        <div v-for="n in 10" :key="n" class="article">
            <h3>タイトル {{n}} </h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt perspiciatis repudiandae eveniet at totam? Animi sapiente, ipsam sed laudantium hic saepe modi adipisci odio commodi deserunt nihil expedita amet aperiam.
            </p>
        </div>    
    </div>
</template>

<style scoped>
.article{
    margin: 8px;
}
</style>

リンク

インデックスとアバウトに<nuxt-link>タグを入れて、リンクできるようにします。

components/Navigation.vue

<template>
<div class="navigation">
    <ul>
        <li>
            <nuxt-link to="/">インデックス</nuxt-link>
        </li>
        <li>
            <nuxt-link to="/about">アバウト</nuxt-link>
        </li>
    </ul>    
</div>

</template>

<style>
.navigation{
    background-color:lightgrey;
    padding: 12px;
}
</style>

これでとりあえず枠組みはできました。
Viteの速さに感動です。

次からはTailwindcssを導入します。