Nuxt.jsが実際のプロダクトで導入されるケースが増えて来ている為、ElementUIと合わせて触ってみました。また、vue-cliのv3betaが試せるタイミングでしたので、合わせて触ってみました。

TL;DR

Nuxt.js + ElementUIのサンプル作成
vue-cliのv3(現時点では3.0.0-beta.6)でのvue init
vue addでのelement-uiライブラリ導入
Github：https://github.com/locol23/learn-nuxt-elementui
後述のnowでデプロイしたデモサイト：https://learn-nuxt-elementui-gacofatvgh.now.sh
- コンテナ停止中の場合は、ページが表示されない為、リロードをお願いします。

対象読者

Nuxt.jsが気になっているが、まだ触っていない
ElementUIをNuxt.jsのプラグインとして導入したい

Nuxt.jsとは

Vue.js製のフレームワーク
ルーティングやSSRが容易に可能
Vuex（状態管理）についても導入が容易

ElementUIとは

Vue.js用の便利なコンポーネントライブラリ
基本的なコンポーネントが揃っている
React.jsでいうところのMaterial-UI等

前提条件

準備として、以下をインストール

Node.js
Yarn
- brew install yarn

vue-cliのインストール

vue-cliのv3betaをグローバルでインストール
※グローバルでインストールしたくない場合はコマンドにglobalを入れずに実行

$ yarn global add @vue/cli

`Nuxt.js`のテンプレートプロジェクトを作成

プロジェクト作成の為にvue initを実行すると、以下のようなエラーが発生します。

$ vue init nuxt-community/starter-template learn-nuxt-elementui

  Command vue init requires a global addon to be installed.
  Please run yarn global add @vue/cli-init and try again.

これは、v3からはvue-cliにvue initコマンドが含まれない為、別途インストールする必要があるからです。
参考：vue-cliのv3からのコマンド一覧

`vue init`コマンドの為に`@vue/cli-init`をインストール

$ yarn global add @vue/cli-init

@vue/cli-initをインストール後、プロジェクト作成を行います。
※設定を特に変更する必要がなければ、Enterを3回押下

$ vue init nuxt-community/starter-template learn-nuxt-elementui
? Project name learn-nuxt-elementui
? Project description Nuxt.js project
? Author locol23 <xxxxxxxx@yyyyyyy.com>

   vue-cli · Generated "learn-nuxt-elementui".

   To get started:

     cd learn-nuxt-elementui
     npm install # Or yarn
     npm run dev

Nuxtテンプレートサイトの起動確認

以下のコマンドを順に実行

$ cd learn-nuxt-elementui
$ yarn 
$ yarn dev

最後にOPEN http://localhost:3000が表示されるのを確認し、
ブラウザからlocalhost:3000へアクセス
下記のページが表示される

ElementUIの導入

プラグインとして導入

本来であれば、vue-cliのv3からの新コマンドvue addにてPluginを導入出来るが、element-uiがまだ未対応？の為、以下のように導入
※vue add element-ui実行時にパッケージのリポジトリが見つからないエラー発生。申し訳ありませんが、何かご存知の方がいらっしゃいましたら、コメント頂ければ嬉しいです。vue add apolloはv3用のリポジトリがある為か、vue add可能でした。

2018/05/14更新
コメントを頂いて確認したところ、element-uiのvue-cli対応が完了していた為、vue add element-uiが可能となっていました。
yarn add element-uiの代わりにvue add element-uiを実行して下さい。
※ 途中の質問は設定を特に変更する必要がなければ、Enterを2回押下
※ 事前にgit initをしていないと途中でエラーになる為、事前に実行

$ git init
$ vue add element-ui
// 途中省略
? Use scss theme? Yes
? ElementUi i18n options None

$ yarn add element-ui // 上記でvue add element-uiをしている場合は実行不要
$ touch plugins/element-ui.js

plugins/element-ui.jsを編集

plugins/element-ui.js

import Vue from 'vue'
import ElementUI from 'element-ui'

const locale = require('element-ui/lib/locale/lang/ja')
Vue.use(ElementUI, { locale })

nuxt.config.jsを編集

nuxt.config.js

   build: {
     /*
     ** Run ESLint on save
     */
     extend (config, { isDev, isClient }) {
       if (isDev && isClient) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
         })
       }
-    }
-  }
+    },
+    vendor: ['element-ui'],
+  },
+  plugins: [
+    '~plugins/element-ui'
+  ],
+  css: [
+    'element-ui/lib/theme-chalk/index.css'
+  ] 
 }

ElementUIを実際に使用

pages/index.vueの修正

サンプルとして、タブやボタン、アイコン、ラジオコンポーネントを配置

pages/index.vue

<template>
  <section class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>

    <div>
      <el-button type="primary">Primary</el-button>
    </div>
    <div>
      <i class="el-icon-edit"></i>
    </div>
    <div>
        <i class="el-icon-loading"></i>
    </div>
    <div>
      <el-radio v-model="radio" label="1">Option A</el-radio>
      <el-radio v-model="radio" label="2">Option B</el-radio>
    </div>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        radio: 1,
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
</style>

最終的なページ

まとめ

Nuxt.jsとElementUIを組み合わせることで、容易にサイト構築が可能
nuxt.config.jsにmode: spaを追記することで、SPAにすることも可能
状況に応じて、Vuexを導入し、状態管理可能
Nuxt.jsはherokuやnowで容易にサイト公開可能
- nowの場合：learn-nuxt-elementディレクトリにて$ yarn global add now->$ now
- ※初回はメールアドレスが必要

vue-cli(v3) + Nuxt.js + ElementUIを触ってみた