Let's say I created a plugin in my Nuxt app:
plugins: [
'~/plugins/toggler',
],
which contains:
import Vue from 'vue'
Vue.mixin({
data() {
return {
isActive: false
}
},
methods: {
toggler() {
this.isActive = !this.isActive
},
},
})
I would like to toggle classes on elements on different components, like:
<div :class="{ 'is-active': isActive }"></div>
and it's correctly triggered via a button:
<button #click.prevent="toggler" />
However, this only change the class on other elements inside the same .vue component where the button is.
Other elements with the same :class="{ 'is-active': isActive }" in different .vue components aren't affected, unless I add a button in those components too.
Here's a sandbox: https://codesandbox.io/s/tender-http-fqlx5
Why you create a mixin in a plugin?
Create and usage mixin:
create:
In the mixins folder inside You're creating a mixin file (example.js)
usage:
import into the component:
import example from '~/mixins/example'
Mixin definition into component into script:
export default {
mixins: [example],
data() {
return {}
},
computed: {},
methods: {}
}
This allows it to be reused into any component.
Related
I have a project using Vue3 with Vite (on Laravel) which have a Wiki.vue page which loads a "MyContent.vue" component.
//On MyContent.vue:
<template>
<div>content component</div>
</template>
<script>
export default {
name: "MyContent",
};
</script>
//On Wiki.vue:
<template>
<MyContent />
</template>
<script>
import MyContent from "./wiki/components/MyContent.vue";
export default {
components: { MyContent },
};
</script>
//On vite.config.js
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => ["MyContent"].includes(tag),
},
},
}),
laravel(["resources/css/app.css", "resources/js/app.js"]),
],
});
On Wiki.vue If I dont change the tag from MyContent to my-content the component won't load at all.
I tried to start a new Vue3 Cli project and I notice that the HelloWorld tag is able to remain Pascal case and load properly which I really wonder what makes the difference.
Thanks in advance!
You've configured a compiler option to treat any elements whose name matches "MyContent" as custom elements, which prevents them from being parsed as Vue components:
// vite.config.js
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: { 👇
isCustomElement: (tag) => ["MyContent"].includes(tag),
},
},
}),
],
});
Wiki.vue's template tries to use a Vue component named "MyContent", which is ignored per the config above. HelloWorld.vue is unaffected by this because the config above only looks for "MyContent".
Solution
You should either remove the isCustomElement config, or rename MyContent.vue. It doesn't sound like you're actually using custom elements, so I think the former is the best solution.
Hi i have a situation where i need to register multiple components at run time within a file.
Display.vue
<template>
<div>
<component v-if="currentComponent" :is="currentComponent">
</component>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data(){
return{
currentComponent:null,
}
},
methods:{
load(e){
for(let key in e.components){
Vue.component(key,e.components[key]);
}
this.$nextTick(() =>{
this.currentComponent = e.components.container;
});
},
},
created(){
document.body.addEventListener('component-ready',this.load, false);
},
}
</script>
in my above file how i want my components to be loaded something like shown below:
components:{
container: component Object{},
header: component Object{},
body: component Object {},
footer: component Object {},
}
here is how i'm dispatching event to above file Display.vue
const event = new Event('component-ready');
event.components = {
container: component Object{},
header: component Object{},
body: component Object {},
footer: component Object {},
};
document.body.dispatchEvent(event);
Execution sequence:
event dispatch component-ready
eventlisterner in created of file Display.vue will call load method
Problem: in my current approach components are registered globally, that i want to avoid. i want to register all components to Display.vue file only
To locally register the components on the fly, you can copy the component definitions into this.$options.components:
export default {
methods: {
load(e) {
this.$options.components = e.components 👈
this.$nextTick(() => {
this.currentComponent = e.components.container
})
},
},
}
demo
I need to render a different layout for the same route for a specific URI with different components depending on the user being on mobile or in desktop.
I would like to avoid having route path checks in the PageCommon(layout component) to keep it clean.
The app has a main component taking care of the layout, it has different router-views where we load the different components for each page URI. This would be a normal route for that.
{
path: '',
component: PageCommon,
children: [
{
path: '',
name: 'Home',
components: {
default: Home,
header: Header,
'main-menu': MainMenu,
'page-content': PageContent,
footer: Footer,
'content-footer': ContentFooter
}
},
I can't change the route components property once the component is loaded so I tried to make a wrapper and pass the components dynamically.
{
path: 'my-view',
name: 'My_View',
component: () => import('#/components/MyView/ViewWrapper')
},
In /components/MyView/ViewWrapper'
<page-common v-if="isMobile">
<my-mobile-view is="default"></my-mobile-view>
<main-menu is="main-menu"></main-menu>
</page-common>
<page-common v-else>
<my-desktop-view is="default"></my-desktop-view>
<header is="header"></header>
<main-menu is="main-menu"></main-menu>
<footer is="footer"></footer>
</page-common>
</template>
I would expect that the components passed inside page-common block would be substituted on the appropriate , but is not how it works, and Vue just loads page-common component with empty router-views.
Is there any approach for this?
Note that I already tried using :is property for loading different components, but the problem then is on how to tell the parent to use this or that component for this page. This is the code for that:
<template>
<component :is="myView"></component>
</template>
<script>
import DesktopView from "#/components/MyView/DesktopView";
import MobileView from "#/components/MyView/MobileView";
export default {
name: 'MyView',
components: {
DesktopView,
MobileView,
},
data(){
return {
myView: null,
isMobile: this.detectMobile()
}
},
methods : {
getViewComponent() {
return this.isMobile ? 'mobile-view' : 'desktop-view';
}
},
created() {
this.myView = this.getViewComponent();
}
}
</script>
I could use this approach for each of the PageCommon router views, creating a component for each that does the above, but it looks like a very bad solution.
A computed method is all you need.
You should have this top level Logic in App.vue and the <router-view> should be placed in both DesktopView and MobileView.
// App.vue
<template>
<component :is="myView"></component>
</template>
<script>
import DesktopView from "#/components/MyView/DesktopView";
import MobileView from "#/components/MyView/MobileView";
export default {
name: 'MyView',
components: {
DesktopView,
MobileView,
},
computed: {
myView() {
return this.detectMobile() ? 'mobile-view' : 'desktop-view';
}
}
}
</script>
You may also want to consider code splitting by setting up Dynamic Components for those layouts since Mobile will load Desktop View because it is compiled into final build, register them globally as dynamic imports instead if importing them in MyView and then delete components also after doing the following instead, this way only the one that is needed will be downloaded saving mobile users their bandwidth:
// main.js
import LoadingDesktopComponent from '#/components/LoadingDesktopComponent '
Vue.componenet('desktop-view', () => ({
component: import('#/components/MyView/DesktopView'),
loading: LoadingDesktopComponent // Displayed while loading the Desktop View
})
// LoadingDesktopComponent .vue
<template>
<div>
Optimizing for Desktop, Please wait.
</div>
</template>
<script>
export default {
name: 'loading-component'
}
</script>
Routing logic will only be processed when <router-view> is available,this means you can delay the presentation of Vue Router, for example you can have :is show a splash screen like a loading screen on any URI before displaying a component in :is that contains <router-view>, only than at that point will the URI be processed to display the relevant content.
I am trying to call a JavaScript function from an imported helper class in my Vue.js component. I import my helper class in my component and try to use mounted() to call it and pass a paramter to the helper class.
I tried out some solutions from here, but didn't help:
Vue.js: Import class with function and call it in child component
https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266
This is what I tried so far, any ideas?
I have a helper class myHelper.js:
export default myHelper {
myHelperFunction(param) {
return param;
}
}
I have a Vue component MyComponent.vue:
<template>
<v-text-field :rules="[myRule]"></v-text-field>
</template>
<script>
import myHelper from './myHelper.js';
export default {
name: 'MyComponent',
data() {
return {
myCls: new myHelper(),
myRule: this.callHelperFunction,
};
},
components: {
myHelper,
},
mounted() {
this.myCls.myHelperFunction();
},
methods: {
callHelperFunction(param) {
this.myCls.myHelperFunction(param);
}
},
};
</script>
You are not really exporting the class. It is a plain object. To export a class instead of an object do this:
// Notice the use of class keyword
export default class MyHelper {
myHelperFunction(param) {
return param;
}
}
Also, you do not need:
components: {
myHelper,
},
Rest of the code stays the same.
So currently I'm importing a component multiple times with different names.
import Page1 from "./Page/Page"
import Page2 from "./Page/Page"
import Page3 from "./Page/Page"
import Page4 from "./Page/Page"
I'm doing this as I want each instance to have its own set of properties, which then I use <keep-alive> to maintain their state.
I am also using them inside a <component :is="".
I was wondering if there was a way to create multiple instances without multiple import.
Codesandbox:
https://codesandbox.io/s/5x391j8y4x
you will notice that if I switch between the HelloWorlds, that the input will maintain their instances (input will change to what they were holding)
You don't need to use <component> because you only have one component type that you want to use: HelloWorld. <component> is only needed when you want to dynamically render different component types.
The reason why you require <keep-alive> is because the HelloWorld component has local state (msg) which will be lost once the component instance is destroyed.
You will need to use key to force Vue to instantiate a new instance of HelloWorld based on the page, and you need <keep-alive> to prevent each instance from being destroyed when you switch between pages.
Here's an example:
<ul>
<li
v-for="page in pages"
#click="currentPage = page"
:key="page.key">{{ page.title }}</li>
</ul>
<keep-alive>
<hello-world
:key="currentPage.key"
:title="currentPage.title"/>
</keep-alive>
import HelloWorld from './components/HelloWorld'
export default {
name: "App",
components: {
HelloWorld,
},
data() {
const pages = [
{
key: "home",
title: "Home"
},
{
key: "about",
title: "About"
},
{
key: "contact",
title: "Contact"
}
]
const currentPage = pages[0]
return {
currentPage,
pages
}
}
}