Vue School で今月から提供されている最新の無料コース「Nuxt.js Fundamentals」をさっそく受講した.最近よく聞くようになった Nuxt.js をまだ試したことがなく気になっていて,タイミングも良かった!今まで Vue School で「Vuex for Everyone」と「Vue.js + Firebase Realtime Database」と「Vue.js + Firebase Realtime Database」を受講して,素晴らしく体験が良く,今回もオススメできる内容だった!
vueschool.io
Nuxt.js Fundamentals
コースは計14個の動画で構成されている.動画を見るだけなら35分で見れるし,動画を見ながら写経をするとしても,2時間あれば終わる.Nuxt.js とは何か?を速習するのに最高なコースと言える.
- 1 : Introduction to Nuxt.js
- What is Nuxt.js? ⏲ 3:45
- Create Nuxt App ⏲ 1:38
- Guided Nuxt.js Project Tour ⏲ 2:02
- 2 : Working with Nuxt.js
- Customize the home page ⏲ 0:56
- Create Application Pages ⏲ 2:59
- Global CSS ⏲ 2:31
- Adding a Navbar to Nuxt Apps ⏲ 1:29
- Dynamic Routes ⏲ 1:53
- Linking Between Pages ⏲ 2:37
- Utilising the Vuex Store ⏲ 4:13
- SEO and Meta Tags ⏲ 3:14
- 3 : Build & Deploy
- Build and Serve the Nuxt.js App ⏲ 0:49
- Deploy Nuxt.js App to Heroku ⏲ 3:47
- Deploy Nuxt.js App to Netlify ⏲ 3:54
以下のように英語字幕が出るので,英語が苦手な人でも,問題なく受講できると思う.前回とまた少しデザインが変わっていた.
(受講画面例)
github.com/vueschool/nuxt-fundamentals
Vue.js 部分を写経するとして,スタイルやスタブデータなどは写経する意味があまりなく,Vue School の GitHub リポジトリからコピーした.動画ごとにコミットされていて,助かる!
github.com
1 : Introduction to Nuxt.js
What is Nuxt.js?
- Nuxt.js = Vue.js フレームワーク
- Server-Side Rendering
- Static Generated (Pre Rendering)
- Automatic Code Splitting
nuxtjs.org
Create Nuxt App
yarn
で Nuxt.js プロジェクトを作成する.
$ yarn create nuxt-app nuxt-fundamentals
yarn create v1.9.4
(中略)
? Project name nuxt-fundamentals
? Project description My tiptop Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name kakakakakku
? Choose a package manager yarn
$ cd nuxt-fundamentals
$ yarn dev
yarn dev
でローカルサーバを起動すると http://localhost:3000
にアクセスできるようになる.
インストール方法の詳細はドキュメントに書いてある.
nuxtjs.org
Guided Nuxt.js Project Tour
Nuxt.js プロジェクト階層を確認した.以下は tree
コマンドで第一階層を出力している.
$ tree -L 1 .
.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock
2 : Working with Nuxt.js
Customize the home page
まず Nuxt.js のロゴを Vue School のログに変更した.
Create Application Pages
Nuxt.js には最初から router が入っているため pages
ディレクトリにファイルを追加すると,すぐアクセスできるようになる.今回は http://localhost:3000/post
にアクセスできるように pages/post.vue
を追加した.
Global CSS
共通となる CSS を assets/style.css
に作成し,Nuxt.js の設定ファイルとなる nuxt.config.js
に以下のような設定を追加した.
module.exports = {
(中略)
css: [
'~/assets/style.css'
],
(中略)
}
nuxtjs.org
Adding a Navbar to Nuxt Apps
次にナビバーコンポーネントを追加する.このあたりは普通に Vue.js を実装するのと同じだった.
<template>
<nav class="nav">
<div class="logo">
<a href="#" class="logo text-lg">
Nuxt Fundamentals
</a>
<span class="subheader">A Vue School course</span>
</div>
</nav>
</template>
Dynamic Routes
Nuxt.js の router 機能を使って http://localhost:3000/posts/${id}
という URL にアクセスできるようにした.具体的にはスタブデータの関係上,以下の 3 URL にアクセスできる.
http://localhost:3000/posts/balut
http://localhost:3000/posts/whereIsIt
http://localhost:3000/posts/how
Linking Between Pages
リンクを nuxt-link
コンポーネントにリファクタリングして,SPA として画面遷移ができるようになった.
<template>
<div class="container">
(中略)
<aside>
<h3>Posts you might enjoy</h3>
<ul>
<li v-for="related in relatedPosts">
<nuxt-link :to="{name: 'posts-id', params: {id: related.id}}">
{{related.title}}
</nuxt-link>
</li>
</ul>
</aside>
</div>
</template>
リンク一覧を返すメソッドでは,自分自身を filter
で除外する実装になっている.
computed: {
(中略)
relatedPosts () {
return this.posts.filter(post => post.id !== this.id)
}
}
右側にリンク一覧を追加できた.
nuxtjs.org
Utilising the Vuex Store
スタブデータを Vuex を使ってリファクタリングした.さらにトップページにもリンク一覧を追加した.
nuxtjs.org
SEO and Meta Tags
Nuxt.js には指定した meta タグを生成する機能がある.例えば,以下のように index.vue
に実装した.
<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
},
head () {
return {
title: 'Home Page 🍕',
meta: [
{ name: 'twitter:title', content: 'Nuxt Fundamentals by Vue School'},
{ name: 'twitter:description', content: 'Nuxt + Vue School = 🍕'},
{ name: 'twitter:image', content: 'https://i.imgur.com/UYP2umJ.png'},
{ name: 'twitter:card', content: 'summary_large_image'}
]
}
},
computed: {
posts () {
return this.$store.state.posts.all
}
}
}
</script>
nuxtjs.org
3 : Build & Deploy
Build and Serve the Nuxt.js App
最後は yarn build
で,本番環境用に minify する.
$ yarn build
$ yarn start
Deploy Nuxt.js App to Heroku
完成した Nuxt.js プロジェクトを Heroku にデプロイする.特にハマるところはなく,通常通り Heroku に push する.
$ heroku git:remote -a xxx
$ git push heroku master
nuxtjs.org
Deploy Nuxt.js App to Netlify
さらに Heroku だけではなく Netlify にもデプロイする.Netlify は静的ファイルを配信するため,今回は Netlify 側で yarn generate
を実行し,生成された /dist
ディレクトリを配信できるようにした.
$ yarn generate
nuxtjs.org
まとめ
- Vue School が公開している無料コース「Nuxt.js Fundamentals」を受講した
- Nuxt.js で簡単なアプリケーションを実装して,Nuxt.js の基礎を学ぶことができた
- ローカルサーバだけではなく,Heroku と Netlify にデプロイする手順も学ぶことができた
- 今回の写経結果は GitHub に push してある
github.com
Vue School 受講履歴
kakakakakku.hatenablog.com
kakakakakku.hatenablog.com
kakakakakku.hatenablog.com