I have a class and method that I need to import globally, so that I could avoid importing it again in each Vue file. I usually import my own class and method in each Vue file like this:
// in myFunc.js
export const fn = {
myFunc: function(param) { alert(param) }
}
// then I use it like this
import {fn} from '#/assets/js/myFunc.js';
fn.myFunc('Lorem ipsum');
In main.js, I tried the following code, which does not work:
import {fn} from '#/assets/js/myFunc.js';
Vue.mixin({
components: { fn },
})
How do I import the class/methods globally?
import Vue from 'vue'
import { fn } from '#/assets/js/myFunc.js';
Vue.prototype.$fn = fn
And then in your component.
this.$fn.myFunc()
Adding Instance Properties.
There may be data/utilities you’d like to use in many components, but
you don’t want to pollute the global scope. In these cases, you can
make them available to each Vue instance by defining them on the
prototype.
Related
I'm having problems with watching deep changes inside component. My store looks like this (simplified):
import {defineStore} from 'pinia'
import {PiniaAuth} from "#/store/piniaauth";
import {get, getDatabase, ref, set, update} from "firebase/database";
import {toRaw} from 'vue'
import {PiniaMainStore} from "#/store/pinia";
// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const PiniaInfo = defineStore('info', {
// arrow function recommended for full type inference
state: () => {
return {
info: {
name: 'John',
bill: 10000,
}
}
},
}
I need to watch bill changes and recount other data in component run methods. I've seen the function storeToRefs but didn't find how to watch if the data is in another object (in my case inside the info object).
Are there any ways to do this?
I'm trying to import multiple components from a folder conditionally. The first example works, but I need to get it working conditionally like in the last example that doesn't work. Otherwise I'd have to always go and change which components should import manually, after adding one to the project folder.
I've also tried wrapping the imports into a function, but I can't get the import * as components syntax to work. Importing one component works fine, but not with * return () => import * as components '#/components/index'
This works
import * as components from '#/components/index'
export default {
components: {
...loadedComponents
}
}
index.js and electronIndex.js
export {
default as one
}
from './One.vue'
export {
default as two
}
from './Two.vue'
This of course doesn't work, but demonstrates what I need
I also tried importing conditionally via functions like stated above, but can't get that to work either.
const IPC = window.ipcRenderer
if (IPC) {
import * as components from '#/components/electronIndex'
} else {
import * as components from '#/components/index'
}
export default {
components: {
...loadedComponents
}
}
I use Vue 3 and I have a dynamic component. It takes a prop called componentName so I can send any component to it. It works, kind of.
Part of the template
<component :is="componentName" />
The problem is that I still need to import all the possible components. If I send About as a componentName I need to import About.vue.
Part of the script
I import all the possible components that can be added into componentName. With 30 possible components, it will be a long list.
import About "#/components/About.vue";
import Projects from "#/components/Projects.vue";
Question
It there a way to dynamically import the component used?
I already faced the same situation in my template when I tried to make a demo of my icons which are more than 1k icon components so I used something like this :
import {defineAsyncComponent,defineComponent} from "vue";
const requireContext = require.context(
"#/components", //path to components folder which are resolved automatically
true,
/\.vue$/i,
"sync"
);
let componentNames= requireContext
.keys()
.map((file) => file.replace(/(^.\/)|(\.vue$)/g, ""));
let components= {};
componentNames.forEach((component) => { //component represents the component name
components[component] = defineAsyncComponent(() => //import each component dynamically
import("#/components/components/" + component + ".vue")
);
});
export default defineComponent({
name: "App",
data() {
return {
componentNames,// you need this if you want to loop through the component names in template
};
},
components,//ES6 shorthand of components:components or components:{...components }
});
learn more about require.context
Vue.js : how to load dependent components?
From router currently using component as follows:
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
But this renders the template before import causing errors. Is there a better way for loading dependencies?
The template uses the - did you register the component correctly.
Your casing is incorrect. Use either 'NewCompA' or 'new-comp-a' for the name.
In fact, it would be even easier to use
import NewCompA from 'wherever/the/component/is/defined'
export default {
components: {
NewCompA
}
}
Your template can then use either
<NewCompA></NewCompA>
<!-- or -->
<new-comp-a></new-comp-a>
See https://v2.vuejs.org/v2/guide/components-registration.html#Name-Casing
After looking at your code again, it does not seem normal. You are assigning the variable A to your component, but trying to import it with the variable NewCompA..
You need to change the following:
From this:
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
To this:
import A from './A';
export default {
components : {
'NewCompA' : A
}
}
...
and use it like this:
<new-comp-a>
I'm new to Vue and was just assigned to an existing Vue project. I noticed the computed properties of one component were getting to around 200 lines. Can computed properties be relocated into an external .ts file and imported? If so, what would the import look like?
Everything I've seen has the computed properties located in the component itself. I'm not even sure it's 'allowed', and if it is I wouldn't know how to import it and then utilize it in the component.
I appreciate the help!
Well I don't know if it helps but you can create a mixin. Read here about them
So you have computed.js:
export const computed = {
computed: {
my_comp_prop() {
//some code
}
}
}
And then in your components:
import { computed } from './computed'
export default {
mixins: [computed],
//more code
}
In the end everything will merge in your component instance. Please don't forget to read about mixins and also about Custom Option Merge Strategies