Nuxt.js のコンポーネント
Nuxt.js は、ソースファイルのフォルダ構造を決めてくれるので、整理が楽でいいですよね。
Vue コンポーネントは、 components フォルダに置くルールになっていますが、
自動で読み込んでくれるわけではありません。
例えば、 components フォルダがこんな構造であった場合：
$ tree components/
components/
├── Logo.vue
├── README.md
├── VuetifyLogo.vue
└── app
└── welcome
└── MessageBoard.vue
2 directories, 4 files
vue コンポーネントにはこんな感じで書くと思います。
<template>
<app-welcome-message-board>
<div>今日はいい天気ですね！</div>
</app-welcome-message-board>
</template>
<script>
import AppWelcomeMessageBoard from '@/components/app/welcome/MessageBoard'
export default {
components: {
AppWelcomeMessageBoard
}
}
</script>
つらたん。。。
コンポーネントを自動で import してほしい！
import 文と components フィールドに定義するのは冗長で面倒です。
上記は1つのコンポーネントの例ですが、
コンポーネント数が多くなると管理がかなり煩雑になります。
解決アプローチは、2つあります。
Vue.component でグローバルに登録する
plugins フォルダに JavaScript ファイルを作って、
最初に全てのコンポーネントを登録しておく方法です。
plugins/components.js
import Vue from 'vue'
import AppWelcomeMessageBoard from '@/components/app/welcome/MessageBoard'
Vue.component('app-welcome-message-board', AppWelcomeMessageBoard)
1行ずつコンポーネントを登録していくこともできますが、
数が増えてきたらちょっと省力化するのもアリです。
plugins/components.js
import Vue from 'vue'
import AppWelcomeMessageBoard from '@/components/app/welcome/MessageBoard'
const components = {
AppWelcomeMessageBoard
}
Object.entries(components).forEach(([name, component]) => {
Vue.component(name, component)
})
Webpack 配下なので、 require.context を使って省力化する方法もあります。
plugins/components.js
import path from 'path'
import Vue from 'vue'
const components = require.context(
'~/components',
true,
/\.(vue|js)$/
)
function camelCase (...args) {
return args.map(part => part.slice(0, 1).toUpperCase() + part.slice(1)).join('')
}
components.keys().forEach((fileName) => {
const extName = path.extname(fileName)
const dirName = path.dirname(fileName).split('/').filter((part, index) => part !== '.')
const baseName = path.basename(fileName, extName)
const componentName = camelCase(...dirName, baseName)
const componentObj = components(fileName)
Vue.component(componentName, componentObj.default || componentObj)
})
デメリット
しかし、この方法には欠点があります。
-
componentsフォルダに置いてあるものの、実際にはどこからも参照されていないコンポーネントが、 一緒にビルドされてしまう - 全てのページで、全てのコンポーネントをメモリに展開してしまう
VuetifyLoaderPlugin で treeShake する際に import する
Vuetify.js をフレームワークとして使用している場合は、
import AppWelcomeMessageBoard from '@/components/app/welcome/MessageBoard'
export default {
components: {
AppWelcomeMessageBoard
}
}
の部分を動的に挿入してビルドしてくれる、 vuetify-loader/lib/plugin が利用できます。
Nuxt.js が >= 2.9.0 である場合は、 nuxt.config.js の buildModules を使って、
nuxt.config.js
export default {
...
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxtjs/vuetify'
],
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
...
},
...
}
となっていると思います。
この vuetify の設定の所を、
nuxt.config.js
import path from 'path'
import glob from 'glob'
const COMPONENTS_DIR = 'components'
export default {
...
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
...
treeShake: {
loaderOptions: {
/**
* This function will be called for every tag used in each vue component
* It should return an array, the first element will be inserted into the
* components array, the second should be a corresponding import
*
* originalTag - the tag as it was originally used in the template
* kebabTag - the tag normalised to kebab-case
* camelTag - the tag normalised to PascalCase
* path - a relative path to the current .vue file
* component - a parsed representation of the current component
*/
match (originalTag, { kebabTag, camelTag }) {
const parts = kebabTag.split('-')
const REQUIRED_MIN_FILENAME = 3
if (parts[0].length >= REQUIRED_MIN_FILENAME) {
for (let i = 0; i < parts.length; i++) {
const pathPart = parts.slice(0, i)
const filePart = parts.slice(i)
const relPath = path.join(COMPONENTS_DIR, ...pathPart, camelTag.substr(-filePart.join('').length))
const globResult = glob.sync(`${relPath}.{js,vue}`, {
cwd: __dirname
})
if (globResult.length > 0) {
return [
camelTag,
`import ${camelTag} from '~/${relPath}'`
]
}
}
}
}
}
}
},
とすると、ローカルにファイルがあるかどうかを判定して、
必要な import 文を挿入してくれます。
デメリット
この方法の良くないところは、ビルド時にファイルシステムにアクセスするので、
時間がかかるところです。
キャッシュすると早くなると思いますが、それはまたの機会に。
Nuxt.js < 2.9.0 の場合
nuxt.config.js の modules に書きましょう。
@nuxtjs/vuetify を使わない場合
この辺 に書かれていることを、自分で書きます。
nuxt.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
export default {
...
/*
** Build configuration
*/
build: {
transpile: [
'vuetify/lib'
],
/*
** You can extend webpack config here
*/
extend (config, ctx) {
config.plugins.push(new VuetifyLoaderPlugin({
match (originalTag, { kebabTag, camelTag }) {
...
}
})
}
}
}
ソースコード公開中
サンプルの Nuxt.js プロジェクトを GitHub で公開しておきました。
なお、 Nuxt.js のバージョンが上がっていくと、
いろいろ構成が変わっていく可能性があります。