Created
September 26, 2019 12:15
-
-
Save steveclarke/83a14c803b312a72b5911ed58ea3812c to your computer and use it in GitHub Desktop.
Globally register your custom components in Quasar. Add this file to your /boot dir
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Globally register all base components for convenience, because they | |
// will be used very frequently. Components are registered using the | |
// PascalCased version of their file name. | |
import upperFirst from 'lodash/upperFirst' | |
import camelCase from 'lodash/camelCase' | |
export default async ({ Vue }) => { | |
console.log('loading components') | |
// https://webpack.js.org/guides/dependency-management/#require-context | |
const requireComponent = require.context( | |
// Look for files in the current directory | |
'../components', | |
// Look in subdirectories | |
true, | |
// Match .vue viles | |
/[\w-]+\.vue$/ | |
) | |
// For each matching file name... | |
requireComponent.keys().forEach((fileName) => { | |
// Get the component config | |
const componentConfig = requireComponent(fileName) | |
// Get PascalCase name of component | |
const componentName = upperFirst( | |
camelCase( | |
// Gets the file name regardless of folder depth | |
fileName | |
.split('/') | |
.pop() | |
.replace(/\.\w+$/, '') // remove file extension | |
) | |
) | |
// Globally register the component | |
Vue.component( | |
`Ua${componentName}`, | |
componentConfig.default || componentConfig | |
) | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment