Using a match function to automatic import your own project's components
This repo copy from vuetify-loader and remove the vuetify part.
vue-automatic-import-loader is a webpack plugin that automatically import SFC.
Here is the example:
<template> <base-button>This is a button component</base-button> </template>will be automatically compiled to:
<template> <base-button>This is a button component</base-button> </template> <script> import BaseButton from '@/components/base/Button.vue' export default { components: { BaseButton } } </script>$ git clone https://github.com/hunterliu1003/vue-automatic-import-loader.git $ cd vue-automatic-import-loader/dev $ yarn install $ yarn serveThen you can see demo in http://localhost:8080/
$ npm install --save vue-automatic-import-loader # or $ yarn add vue-automatic-import-loaderin vue.config.js:
const VueAutomaticImportPlugin = require('vue-automatic-import-loader/lib/plugin') module.exports = { configureWebpack: { plugins: [ new VueAutomaticImportPlugin({ match(originalTag, { kebabTag, camelTag }) { /** * 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 */ if (kebabTag.startsWith('base-')) { return [ camelTag, `import ${camelTag} from '@/components/base/${camelTag}.vue'` ] } } }) ] } }in nuxt.config.js:
import VueAutomaticImportPlugin from 'vue-automatic-import-loader/lib/plugin' export default { build: { plugins: [ new VueAutomaticImportPlugin({ match(originalTag, { kebabTag, camelTag, path, component }) { /** * 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 */ if (kebabTag.startsWith('base-')) { return [ camelTag, `import ${camelTag} from '@/components/base/${camelTag}.vue'` ] } } }) ] } }