I am exploring the lazy-loading feature and I'm trying to use it for Bootstrap-Vue component, but it does not work.
If I import the b-card "normally", it gets renderred correctly:
import { BCard } from 'bootstrap-vue';
export default {
components: {
BCard
}
};
But when I'm attempting the 'lazy-load' syntax it does not work:
export default {
components: {
BCard: () => import('bootstrap-vue').BCard
}
};
The b-card component is not renderred, but no error is thrown and in Chrome's DOM inspection tools I can see that the placeholder <!----> is placed by Vue where the b-card component should be. I suspect that the library object that is loaded does not have the BCard property, but I don't know how else to access the library component with the 'lazy' syntax.
Is it possible to lazy-load a module from a library? How to do it?
When dynamically importing a module, you use the import keyword as a function and it returns a promise. So, to access the module component, you can use this syntax:
export default {
components: {
BCard: () => import('bootstrap-vue').then(module => module.BCard)
}
}
Related
I'd like to conditionnaly import a component in the vue router. Here is what I have for the moment:
children: [
{
path: ':option',
component: () => import('../components/Option1.vue'),
},
],
Depending on what :option is, I want to import a different component (Option1.vue, Option2.vue, etc.). I know I could put several children but i actually need the option variable in my parent component (I make tests if the route has an option).
How would it be possible to do that?
Thanks in advance :)
You can create a loader component containing a dynamic component instead of doing conditional routing. In the loader, you'll conditionally lazy load the option component based on the route param. Not only is this easier when routing, you also don't have to manually import anything, and only options that are used will be imported.
Step 1. Route to the option loader component
router
{
path: ':option',
component: () => import('../components/OptionLoader.vue'),
}
Step 2. In that option loader template, use a dynamic component which will be determined by a computed called optionComponent:
OptionLoader.vue
<template>
<component :is="optionComponent" />
</template>
Step 3. Create a computed that lazy loads the current option
OptionLoader.vue
export default {
computed: {
optionComponent() {
return () => import(`#/components/Option${this.$route.params.option}.vue`);
}
}
}
This will load the component called "Option5.vue", for example, when the option route param is 5. Now you have a lazy loaded option loader and didn't have to manually import each option.
Edit: OP has now indicated that he's using Vue 3.
Vue 3
For Vue 3, change the computed to use defineAsyncComponent:
OptionsLoader.vue
import { defineAsyncComponent } from "vue";
computed: {
optionComponent() {
return defineAsyncComponent(() =>
import(`#/components/Option${this.$route.params.option}.vue`)
);
}
}
Here is something that works in VueJS3:
<template>
<component :is="userComponent"/>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
computed: {
userComponent() {
const route = useRoute();
const router = useRouter();
const components = {
first: 'Option1',
second: 'Option2',
third: 'OtherOption',
fourth: 'DefaultOption',
};
if (components[route.params.option]) {
return defineAsyncComponent(() => import(`./options/${components[route.params.option]}.vue`));
}
router.push({ path: `/rubrique/${route.params.parent}`, replace: true });
return false;
},
},
};
</script>
Source: https://v3-migration.vuejs.org/breaking-changes/async-components.html
And it's possible to get an error message like this one for the line with "return":
Syntax Error: TypeError: Cannot read property 'range' of null
In that case, it means you probably want to migrate from babel-eslint to #babel/eslint-parser (source: https://babeljs.io/blog/2020/07/13/the-state-of-babel-eslint#the-present)
I just make it quick:
In normal loading of a component (for example "Picker" component from emoji-mart-vue package) this syntax should be used:
import {Picker} from "./emoji-mart-vue";
Vue.component("picker", Picker);
And it works just fine.
But when I try to lazy load this component I'm not sure exactly what code to write. Note that the following syntax which is written in the documentation doesn't work in this case as expected:
let Picker = ()=>import("./emoji-mart-vue");
The problem, I'm assuming, is that you're using
let Picker = ()=>import("./emoji-mart-vue");
Vue.component("picker", Picker);
to be clear, you're defining the component directly before the promise is resolved, so the component is assigned a promise, rather than a resolved component.
The solution is not clear and depends on "what are you trying to accomplish"
One possible solution:
import("./emoji-mart-vue")
.then(Picker=> {
Vue.component("picker", Picker);
// other vue stuff
});
This will (block) wait until the component is loaded before loading rest of the application. IMHO, this defeats the purpose of code-spliting, since the application overall load time is likely worse.
Another option
is to load it on the component that needs it.
so you could put this into the .vue sfc that uses it:
export default {
components: {
Picker: () => import("./emoji-mart-vue")
}
};
But this would make it so that all components that use it need to have this added, however, this may have benefits in code-splitting, since it will load only when needed the 1st time, so if user lands on a route that doesn't require it, the load time will be faster.
A witty way to solve it
can be done by using a placeholder component while the other one loads
const Picker= () => ({
component: import("./emoji-mart-vue"),
loading: SomeLoadingComponent
});
Vue.component("picker", Picker);
or if you don't want to load another component (SomeLoadingComponent), you can pass a template like this
const Picker= () => ({
component: import("./emoji-mart-vue"),
loading: {template:`<h1>LOADING</h1>`},
});
Vue.component("picker", Picker);
In PluginPicker.vue you do this:
<template>
<picker />
</template>
<script>
import { Picker } from "./emoji-mart-vue";
export default {
components: { Picker }
}
</script>
And in comp where you like to lazy load do this:
The component will not be loaded until it is required in the DOM, which is as soon as the v-if value changes to true.
<template>
<div>
<plugin-picker v-if="compLoaded" />
</div>
</template>
<script>
const PluginPicker = () => import('./PluginPicker.vue')
export default {
data() = { return { compLoaded: false }}
components: { PluginPicker }
}
// Another syntax
export default {
components: {
PluginPicker: () => import('./PluginPicker.vue')
}
}
</script>
I have many components that use the same children components. I am trying to save myself some time and code by importing all of the components in a .js file, Similar to using mixins in vue. and then import that file into the parent component. Unfortunately the parent component does not recognize these imported components. Seems like a simple ask but having trouble implementing it.
When I log Children in the parent I get a components object with the two vue components I am just not sure how to utilize it in the parent component. I would import them globally however not every component need them so it wouldn't be very efficient.
I also feel like I am importing Components twice into the parent but again am unsure of how to accomplish this so though I would post what I have so far.
thanks for your help
**Children**
export default {
components: {
Popover: () => import('#/components/inline-components/popover'),
Button: () => import('#/components/inline-components/button')
}
}
**Parent**
<template>
<Button>I am the Button</Button>
</template>
import Children from 'utilities/children'
export default {
components: {
Children
}
}
Posting the answer from Husam Ibrahim comment.
**Children**
export default {
components: {
Popover: () => import('#/components/inline-components/popover'),
Button: () => import('#/components/inline-components/button')
}
}
**Parent**
<template>
<Button>I am the Button</Button>
</template>
import Children from 'utilities/children'
export default {
// Add them as mixins instead of components
mixins: [Children]
}
In laravel 5.7 / vue 2.5.17 / vuex^3.1.0 I make event handlers in my container file MainApp.vue
with events:
mounted() {
bus.$on('dialog_confirmed', (paramsArray) => {
alert( "dialog_confirmed paramsArray::"+var_dump(paramsArray) )
if ( paramsArray.key == this.addToBookmarksKey(paramsArray.hostel_id) ) {
this.runAddToBookmarks(paramsArray.hostel_id, paramsArray.index);
}
if ( paramsArray.key == this.deleteFromBookmarksKey(paramsArray.hostel_id) ) {
this.runDeleteFromBookmarks(paramsArray.hostel_id, paramsArray.index);
}
})
}, // mounted() {
The idea is that runAddToBookmarks must be called from different pages and I need to set common method check which event is triggered.
I tried in resources/js/helpers/commonFuncs.js to add method :
export function addToBookmarksKey(hostel_id) {
return 'hostels_sorted__add_to_bookmarks_'+hostel_id;
}
and to use it in my vue file. like:
...
<template v-if="hostelsList.length">
<template v-for="nextHostel, index in hostelsList" >
<hostel-list-item
:currentLoggedUser="currentLoggedUser"
:nextHostel="nextHostel"
:index="index"
:hostelBookmarks="hostelBookmarks"
:delete_from_bookmarks_key="deleteFromBookmarksKey(nextHostel.id)"
:add_to_bookmarks_key="addToBookmarksKey(nextHostel.id)"
></hostel-list-item>
</template>
</template>
...
</template>
<script>
import {bus} from '../../../app';
import appMixin from '../../../appMixin';
import { addToBookmarksKey } from "../../../helpers/commonFuncs";
But I got error : property or method "addToBookmarksKey" is not defined on the instance but referenced during render.
Why addToBookmarksKey is not accessible in template of my vue file and which is simple way to work it?
I need to use addToBookmarksKey in many vue files , both in template and it javascript block ?
Thanks!
You need to define your helper function inside your component instance to use it within the template:
<script>
import { addToBookmarksKey } from "../../../helpers/commonFuncs";
export default {
//...
methods: {
addToBookmarksKey,
//...
}
}
You also can define it globally by adding the function in a mixin directly in main.js:
import Vue from "vue";
import App from "./App.vue";
import { addToBookmarksKey } from "path/to/the/helpers/commonFuncs";
Vue.mixin({
methods: {
addToBookmarksKey
}
})
new Vue({
render: h => h(App)
}).$mount("#app");
no need to import and define it inside your components this way.
I'm using Webpack dynamic imports and Vue dynamic components to lazy-load a rather large Vue markdown-parsing component.
Now, I want to add syntax highlighting with Prism.js. I'm currently using the mounted() lifecycle hook of the parent component to install syntax highlighting, but this is only working some of the time, since the syntax highlighting depends on the Markdown component to be loaded first (when I manually execute Prism.highlightAll() from the console after page load, it works every time).
Relevant source code:
<template>
<vue-markdown>
# Hello
```javascript
import { hello } from "world"
```
</vue-markdown>
</template>
<script>
export default {
components: {
"vue-markdown": () => import("vue-markdown/src/VueMarkdown"),
},
mounted() {
import("prismjs/themes/prism-tomorrow.css")
.then(() => import("prismjs").then(p => Prism.highlightAll()))
}
}
</script>
So how do I wait for a dynamic component to load? I almost want something like this:
<vue-markdown v-on:mounted="syntaxHighlighting()"></vue-markdown>
I solved the problem by creating my own component which extends the VueMarkdown component, but with a mounted() hook that activates syntax highlighting. It looks like this:
<script>
import VueMarkdown from "vue-markdown/src/VueMarkdown"
import "prismjs/themes/prism-tomorrow.css"
import Prism from "prismjs"
export default {
extends: VueMarkdown,
mounted() {
Prism.highlightAll()
}
}
</script>
Then, I dynamically import this component into the parent component.
Not sure if this is the best solution, though...