blog.takurinton.dev

Nuxt入門した

2021-02-27

はじめに

どうも,僕です.

Nuxtに入門しました.よくわからないバグで昨日1日溶かしましたがまああれも経験ということで(元々使おうとしてたライブラリが某アダルトサイトの非公式ライブラリだったのでどこかがおかしかったのかも)

ということで元々作ろうとしてたものに比べてだいぶ簡単な構成になってしまいましたがNuxtデビューブログを書いていきます.

あと今回内容薄いので許してください.あくまでも入門です.

構成

全体の構成はこんな感じです.ツリー書くのめんどくさいのでスクショで許してください.

こちら

![](../contents/images/9f5a271e-42d0-4b85-89af-99f43743c984.png)

結構個人的には最小構成にしたい人間なのでこんな感じでやってます.

設定ファイル

まずは簡単に設定をしていきたいと思います.

package.json

// package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start"
  },
  "devDependencies": {
    "nuxt": "^2.15.2",
    "nuxt-vite": "^0.0.3"
  }
}

npm i

nuxt-vite は vitejs を Nuxt で使用できるようにしたぷらぐいんです.

vitejs に関しては後から記事にしますが,Rollupをベースとしたバンドル不要の高速で動作するビルドツールです.Anthony Fu さんが主に管理をしていて Vue の作者である Evan You さんが作成しました.

nuxt.config.js nuxt-vite

// nuxt.config.js

export default {
  buildModules: [
    'nuxt-vite'
  ]
}

今回は定義ファイルはこれでおしまいです.webpack とか使ってごちゃごちゃしてる時から比較すると楽ですね.ただ,md を使用したい場合や css のフレームワークを使用したい場合には別途設定が必要になります.

vite-plugin-vue2

見た目を書いていく

index.vue

簡単にしたいので僕のブログのくそAPIでも叩いてみたいと思います.

レスポンスの形式がおかしいのは気にしないでください.修正しようと思って半年くらい経ちました.泣いた.

asyncData fetch

そのほかは Vue のお作法と同じかと思います.

// index.vue






ちょっと脱線

結局 fetch と asyncData の違いはなんなのか

ドキュメントには以下のようにあります.

fetch の場合

fetch はサーバーサイドレンダリングではコンポーネントのインスタンスが作成されたとき、クライアントサイドでは遷移するときに呼び出されるフックです。fetch フックは解決される promise を(明示的に、または async/await を使って暗黙的に)返却するべきです

asyncData の場合

asyncData はユニバーサルなデータ取得のためのもう 1 つのフックです。非同期な状態を保存するために、コンポーネントのインスタンスにプロパティをセットする(または Vuex アクションをディスパッチする)必要がある fetch とは異なり、asyncData は単にその返却された値をコンポーネントのデータにマージします。以下は @nuxt/http ライブラリを使った例です

パッと見たところ,両方ともSSR次に外部のデータをフェッチするときに使用しますが,実際にはとってきたデータを store に入れてグローバルに参照できるようにするときなどに fetch を使い,今回のようなぺらいち(もしくはそのページコンポーネント内でしかデータを扱わない場合)には asyncData を使用すると良いということになります.

つまり今回は asyncData がよかったということです.

まとめ

今回は Nuxt デビューをまとめました.

また,nuxt-vite の素振りも兼ねていたので感覚が掴めてよかったです(最初に言ったように昨日は死んでましたが)

普通に使う分には申し分ないくらいに使えますが,2日前にリリースされたばかりでまだまだバグだらけなので実用的ではありませんが逆にコントリビューションチャンスじゃんくらいのつもりで皆さん積極的に nuxt-vite,またついでに vitejs も使っていきましょう!

では