2020-05-11 NuxtJS の full-static 機能を試す
今回の機能追加によって NuxtJS だけで完全な静的サイトを作れるようになりました。
2020-05-11 時点では nuxt-edge でしか試せません。
セットアップ
code:bash
$ yarn create nuxt-app --edge
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in .
? Project name nuxt-full-static-sandbox
? Project description My slick Nuxt.js project
? Author name odan
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework Express
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
pages を用意
pages/index.vue と pages/about.vue を用意します。asyncData で外部 API を叩いて、それを描画するだけのページです。nuxt-link でページ遷移ができ、これまではこのページ遷移のタイミングで外部 API の call が行われていました。
code:pages/index.vue
<template>
<div class="container">
<div>data: {{ origin }}</div>
<nuxt-link to="/about">
abount
</nuxt-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData ({ app }) {
return {
url: response.data.url
}
}
})
</script>
code:pages/about.vue
<template>
<div class="container">
<div>data: {{ origin }}</div>
<nuxt-link to="/">
index
</nuxt-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData ({ app }) {
return {
url: response.data.url
}
}
})
</script>
生成
export コマンドが追加されたので、これを叩きます。
code:bash
$ yarn nuxt-ts build --target static
$ yarn nuxt-ts export
これで dist 以下に静的ファイルが生成されました。
サンプル
ページ遷移しても API が叩かれることはないです。
https://gyazo.com/6b959aa07cdabbbe1311a33c797504ab
payload.jsにデータが入っているみたいです。
https://gyazo.com/830dfa0f0e8a1d50b5d3e6d520b36a31