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等
前提条件
準備として、以下をインストール
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を編集
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を編集
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の修正
サンプルとして、タブやボタン、アイコン、ラジオコンポーネントを配置
<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 - ※初回はメールアドレスが必要
-