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

TL;DR

対象読者

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

Nuxt.jsとは

Screen_2018_03_27_1_09.png

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

ElementUIとは

Sullscreen_2018_03_27_1_19.png

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

前提条件

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

vue-cliのインストール

vue-cliv3betaをグローバルでインストール
※グローバルでインストールしたくない場合はコマンドに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-clivue 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へアクセス
下記のページが表示される

Screen_2018_03_26_22_38.png

ElementUIの導入

プラグインとして導入

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

$ yarn 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>

最終的なページ

Screen_2018_03_27_3_21.png

まとめ

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

参考

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.