63
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Myuon Corp.Advent Calendar 2016

Day 14

Vue.js向けSSRフレームワークnuxt.jsを触ってみた

Last updated at Posted at 2016-12-13

nuxt.jsとは

nuxt/nuxt.js

Few hours after the announcement of Next.js, the idea of creating server-rendered Vue.js applications the same way as Next.js became inevitable: Nuxt.js was born.

Writing a server-rendered Vue.js application with Nuxt.js is easy:

No need to write Webpack/Babel configuration
No need to create a node.js server
Writing *.vue files, because it rocks
Creating new routes by adding a file in the pages/ directory
Accessing the server data inside the routes components easily

What is Nuxt.js ?

WebpackやBabelの設定が不要でnode.jsのサーバも不要。
vueファイルを追加するだけで簡単にVue.jsアプリのSSRができるようです。

ようはnext.jsのVue.js版ということですね。
next.jsについては以下の記事が詳しいです。

プロジェクトを作成する

ではさっそく、適当なアプリを作ってみます。
まずはディレクトリを作成します。

$ mkdir nuxt-sample
$ cd nuxt-sample

package.json作成後、nuxt.jsをインストールします。

$ npm init -y
$ npm install --save nuxt

テンプレートはjadeを使いたいのでこちらもインストールしておきます。

$ npm install --save-dev jade

nuxtをインストール後、package.jsonを以下のように変更します。
これでnpm run devでサーバが起動するようになります。

package.json
{
  "name": "nuxt-sample",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "nuxt": "^0.8.8"
  },
  "devDependencies": {
    "jade": "^1.11.0"
  }
}

pagesディレクトリの作成

pagesディレクトリの構造からroutesが生成されます。
*.vueファイルを追加していくことでアプリケーションを作成していきます。

pageディレクトリ構造 path
./pages/index.vue /
./pages/hoge.vue /hoge
./pages/foo/bar.vue /foo/bar

ということでpagesディレクトリを作成します。

$ mkdir pages

参考

ページを作ってみる

まずはHelloWorldを表示してみようということで、
pagesディレクトリに以下のファイルを追加します。

pages/index.vue
<template lang="jade">
.container
  h1 {{msg}}
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World.'
    };
  }
};
</script>

起動して確認してみます。

$ npm run dev

hello.png

表示されました。
curlでSSRされているか確認してみます。

$ curl localhost:3000
<!DOCTYPE html>
<html n-head-ssr n-head="">
  <head>
    <title n-head="true"></title>
    <base href="/">
  </head>
  <body n-head="">
    <div id="__nuxt" server-rendered="true"><div><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0" data-v-0808b48a></div> <div class="container"><h1>Hello World.</h1></div></div></div>
    <script type="text/javascript" defer>window.__NUXT__={"data":[{"msg":"Hello World."}],"error":null,"serverRendered":true}</script>
    <script src="/_nuxt/vendor.bundle.js" defer></script>
    <script src="/_nuxt/nuxt.bundle.js" defer></script>
  </body>
</html>

ちょっと見づらいですが<h1>Hello World.</h1>と表示されていますね。
ちゃんとSSRされているようです。

AJAXなページを作ってみる

外部のAPIからデータを取得して画面上に表示してみます。
myjson 1 に以下のようなjsonを保存して取得してみます。

{
  "items": [
    "foo",
    "bar",
    "baz"
  ]
}

xhrライブラリの追加

今回はaxiosを使います。

$ npm install --save axios

pages/index.vueを修正

pages/index.vueを以下のように修正します。

pages/index.vue
<template lang="jade">
.container
  ul
    li(v-for="item in items") {{item}}
</template>

<script>
import axios from 'axios';

export default {
  data () {
    // dataを非同期で取得
    return axios.get('https://api.myjson.com/bins/jewnd').then(res => res.data);
  }
};
</script>

では確認してみます。

ajax.png

OKです。
続いてcurlでSSRされているか確認してみます。

$ curl localhost:3000
<!DOCTYPE html>
<html n-head-ssr n-head="">
  <head>
    <title n-head="true"></title>
    <base href="/">
  </head>
  <body n-head="">
    <div id="__nuxt" server-rendered="true"><div><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0" data-v-0808b48a></div> <div class="container"><ul><li>foo</li><li>bar</li><li>baz</li></ul></div></div></div>
    <script type="text/javascript" defer>window.__NUXT__={"data":[{"items":["foo","bar","baz"]}],"error":null,"serverRendered":true}</script>
    <script src="/_nuxt/vendor.bundle.js" defer></script>
    <script src="/_nuxt/nuxt.bundle.js" defer></script>
  </body>
</html>

ajaxなページもちゃんとSSRされているようです!

<div class="container"><ul><li>foo</li><li>bar</li><li>baz</li></ul></div></div></div>

終わりに

ドキュメントはほとんとのページがcoming soonになっていたりとまだまだこれからと言った感じではありますが開発も活発なようですし、これから注目していきたいです。

  1. JSONをホスティングできるサービス。

63
57
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
63
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?