vue-enterprise-boilerplate | opinionated architecture and dev environment | Frontend Framework library
kandi X-RAY | vue-enterprise-boilerplate Summary
Support
Quality
Security
License
Reuse
- Loads a lazy component .
- Mounts login .
- Get namespace and namespace
- Set default authorization headers .
- Redirect to a route .
- retrieve the saved state from localStorage
- resolve relative path to a src
- Saves a key to storage .
vue-enterprise-boilerplate Key Features
vue-enterprise-boilerplate Examples and Code Snippets
Trending Discussions on vue-enterprise-boilerplate
Trending Discussions on vue-enterprise-boilerplate
QUESTION
I am trying to globally register my frequently used components. I have started using kebab casing because I am splitting my css, js and vue files up so I want to modify my existing registration script which looked like this:
import Vue from "vue";
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";
const requireComponent = require.context(
// The relative path of the components folder
"./components",
// Whether or not to look in subfolders
false,
// The regular expression used to match base component filenames
/Base[A-Z]\w+\.(vue|js)$/
);
requireComponent.keys().forEach((fileName) => {
// Get 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+$/, "")
)
);
// Register component globally
Vue.component(
componentName,
// Look for the component options on `.default`, which will
// exist if the component was exported with `export default`,
// otherwise fall back to module's root.
componentConfig.default || componentConfig
);
});
I have since found another here:
which I have modified and changed it to this:
// 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 Vue from "vue";
// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
// Look for files in the current directory
"./components",
// Do not look in subdirectories
true,
// Only include "_base-" prefixed .vue files
/base-[\w-]+\.vue$/
);
// For each matching file name...
requireComponent.keys().forEach((fileName) => {
// Get the component config
const componentConfig = requireComponent(fileName);
// Get the PascalCase version of the component name
const componentName = fileName
// Remove the file extension from the end
.replace(/\.\w+$/, "")
// Split up kebabs
.split("-")
// Upper case
.map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
// Concatenated
.join("");
console.log(componentName);
// Globally register the component
Vue.component(componentName, componentConfig.default || componentConfig);
});
But if I try to use my components, they don't work. I have this simple one defined like this:
import { defineComponent } from "@vue/composition-api";
export default defineComponent({
name: "BaseToggle",
props: {
open: {
type: Boolean,
},
color: {
type: String,
},
},
});
and if I try to use it in any other component like this:
or even
I get this error:
Does anyone have any idea what might be going wrong?
The component is split into 3 files
- base-toggle.component.scss
- base-toggle.component.ts
- base-toggle.component.vue
and it exists in folder ./components/base-toggle
. So I have updated my script to this:
// 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 Vue from "vue";
// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
// Look for files in the current directory
"./components",
// Do not look in subdirectories
true,
// Only include "_base-" prefixed .vue files
/base-[\w-]+\.component.vue$/
);
// For each matching file name...
requireComponent.keys().forEach((fileName) => {
// Get the component config
const componentConfig = requireComponent(fileName);
// Get the PascalCase version of the component name
const componentName = fileName
// Remove the file extension from the end
.replace(".component.vue", "")
// Split up kebabs
.split("-")
// Upper case
.map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
// Concatenated
.join("");
console.log(componentName);
// Globally register the component
Vue.component(componentName, componentConfig.default || componentConfig);
});
But this is still not working.
ANSWER
Answered 2021-Jun-24 at 14:29Turns out it was because of the folder. I updated my script to this:
// 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 Vue from "vue";
// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
// Look for files in the current directory
"../components",
// Do not look in subdirectories
true,
// Only include "_base-" prefixed .vue files
/base-[\w\-.]+\.vue$/
);
// For each matching file name...
requireComponent.keys().forEach((fileName) => {
// Get the component config
const componentConfig = requireComponent(fileName);
// Get the PascalCase version of the component name
const componentName = fileName
// Remove any folder name
.split("/")[1]
// Remove the file extension from the end
.replace(".component.vue", "")
// Split up kebabs
.split("-")
// Upper case
.map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
// Concatenated
.join("");
console.log(componentName);
// Globally register the component
Vue.component(componentName, componentConfig.default || componentConfig);
});
With the help of @Michal, I changed the regex, so now it's this:
// 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 Vue from "vue";
// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
// Look for files in the current directory
"../components",
// Do not look in subdirectories
true,
// Only include "_base-" prefixed .vue files
/base-[\w-.]+\.vue$/
);
// For each matching file name...
requireComponent.keys().forEach((fileName) => {
// Get the component config
const componentConfig = requireComponent(fileName);
// Get the PascalCase version of the component name
const componentName = fileName
// Remove any folder name
.split("/")[1]
// Remove the file extension from the end
.replace(/\.\w+$/, "")
// Split up kebabs
.split("-")
// Upper case
.map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
// Concatenated
.join("");
console.log(componentName);
// Globally register the component
Vue.component(componentName, componentConfig.default || componentConfig);
});
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vue-enterprise-boilerplate
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page