Nuxt.jsでVue.jsのUIライブラリー「Element」を使用する方法

今回は、Nuxt.jsでさくっとWebアプリケーションを作りたい場合に便利なVue.jsのUIライブラリー「Element」を使用する方法をご紹介いたします。

Elementとは?

Element

Vue.js 2.0ベースのコンポーネントライブラリで、シンプルでオシャレな数多くのコンポーネントを使用することができます。BootstrapのVue.js版みたいなものです。

ちょっとした試作品を作りたいときや、デザインに工数をかけたくない場合はとても便利なライブラリです。

Nuxt.jsでのElementの導入方法

まずは、事前に上のリンクの記事の方法でNuxt.jsの環境構築を済ませておいて下さい。環境構築がされているということを前提で話しをすすめさせていただきます。

npmでElementをインストール

ターミナル

npm i element-ui -S

まずは、作業フォルダに移動してElementをインストールしましょう。

pluginsフォルダにelement-ui.jsを作成

pluginsフォルダにelement-ui.jsを作成して、以下のコードを記述しましょう。

element-ui.js

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

pluginsフォルダに作成したelement-ui.jsを読む込む

では早速、pluginsフォルダに作成したelement-ui.jsを読むこみしましょう。pluginを読み込むには、nuxt.config.jsで設定します。

nuxt.config.js

module.exports = {
plugins: ['plugins/element-ui.js']
}

nuxt.config.jsにplugins:〜のコードを追加して下さい。

layoutでElementのCSSを読み込む

使用するlayoutファイルからElementのCSSを読み込みましょう。layoutをなにも作成してなければdefault.vueに記載してください。

default.vue

<template>
<div>
<nuxt/>
</div>
</template> <style src="element-ui/lib/theme-default/index.css"></style>

以上です。あとは好きなようにコンポーネントを使うだけなのですが、npm run generateで作成したファイルをサーバーにアップすると、サブディレクトリに置いた場合パスがおかしかったり、何かとエラーがでますね…。こちらの件、修正方法が分かったらお知らせします。

© 2011 - 2017 ShoYamane