I thought about building a small website with Vue.js, but as I used Nuxt.js I was feeling unexpectedly good, so by the end of this slide anyone could create a website using Nuxt.js It will be A story and impressions.

1. Vue.jsで小規模ウェブサイトを構築しよ
うと思ったけど、Nuxt.jsを使用したら思
いの外使用感がよかったので、このスラ
イドが終わる頃には誰もがNuxt.jsを使っ
てウェブサイトを作れるようになるであろ
う話と感想。
ArcanaMeetup#40 kasi
ナクスト

2. Vue.js 初心者なので、
Nuxt.js との比較や違いについ
ては言及できません。

3. Nuxt.js とは？

4. Nuxt.js はユニバーサルな
Vue.js アプリケーションを構築する
ためのフレームワークです。
https://ja.nuxtjs.org/

5. Nuxt.js を使ったスター
ターテンプレートあるよ

6. https://ja.nuxtjs.org/guide/installation

7. 全部?入りだよ
• Vue 2
• Vue-Router
• Vuex（Vuex ストアのオプション を利用しているときに限ります）
• Vue Server Renderer（mode: 'spa' を利用しているときを除く)
• Vue-Meta
• Webpack
• vue-loader
• babel-loader など

8. ディレクトリ構造
├── assets
├── components
│ └── AppLogo.vue
├── layouts
│ └── default.vue
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
│ └── index.vue
├── plugins
├── static
│ └── favicon.ico
└── store

9. ディレクトリ構造
├── assets(コンパイルしたいファイルSASSとか)
├── components（パーツ群）
├── layouts(テンプレ)
├── middleware(共通処理、認証とか)
├── pages(ページ)
├── plugins(外部パッケージの利用)
├── static(静的ファイル)
└── store(Vuex)

10. ビュー

11. サーバーサイドで処理が実行されたとき

12. このようなレイアウトのペー
ジを作成しました。

13. Layout

14. Layoutではヘッダー、フッターのレイア
ウト。
また時間によってページ遷移させる共
通処理を行っている（あるプラットフォー
ムに依存しているためLayoutで行って
いる）。

15. Page

16. Pageでは非同期でキャラクターのデー
タを取得している。

17. Component

18. もうなんか作れそうじゃ
ない？

19. Next.js で作っちゃいな
よ。

20. 感想

21. Nuxt.js(Vue.js) は非エンジニアに
もわかりやすいソースコード
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
nuxt-sample
</h1>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
export default {
components: {
AppLogo
}
}
</script>
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
display: block;
font-weight: 300;

22. scoped CSS でCSSの設計は不
要になる
CSSの設計でOOCSS、BEM、SMACSS、FLOCSSなどあるらしいけど、
<style scoped>
って書けばページやコンポーネント単位で管理できるから不要でいいんだよね？

23. 環境構築が簡単なのはやっぱり素
晴らしい
$ vue init nuxt-community/starter-template <project name>
$ cd <project name>
$ npm install
$ npm run dev
もうできた！

24. おわり