I defined my global variable in main.js file like this
const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable***
and then when I tried to access this variable $myGlobalVariable in other js file it is undefined, but I can access in vue components.
In the vue 2 it is possible to access both in js file and vue components. I hope you gonna help me :)
In order to access a global Vue variable outside of a Vue component you have to:
1. Export the app instance
/* main.js */
export const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable
2. Import the app instance in the other JS file
/* other.js */
import { app } from '#/main.js'
console.log(app.config.globalProperties.$myGlobalVariable)
Related
Is it possible to initialize Pinia store inside Vue 2 single file component? Right now I'm trying do this:
import { createPinia, PiniaVuePlugin } from 'pinia';
import Vue from 'vue';
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
Vue.prototype.$pinia = pinia;
and it works in app but when I import this component to another App I'm having this error:
getActivePinia was called with no active Pinia. Did you forget to install pinia?
Is it even possible to initialize the pinia after main instance of app is created?
Hello I have a new Vue 3 app using Vite.
I'm registering my UserTextInput component globally but inside all my components this.$options.components is empty
import UserTextInput from "./components/defaultComponents/UserTextInput.vue";
const app = createApp(App);
app.component('UserTextInput', UserTextInput);
app.mount('#app');
Inside any other component
mounted() {
console.log(this.$options.components); // {} empty object
},
I'm looking for a way to see what components have been registered globally.
Any Ideas?
You could try this one
import { getCurrentInstance } from 'vue';
getCurrentInstance().appContext.components // this will list all component registered globally
I found the list stored here in my Vue 3 app:
app._instance.appContext.components
How can I use a Vue 3 plugin in Storybook stories?
For example, I use FormKit to create form elements in my components.
FormKit is rigged globally in my main.ts like so:
import { plugin, defaultConfig } from '#formkit/vue'
const app = createApp(App)
app.use(plugin, defaultConfig)
but this file isn't used by Storybook... so how can I do the same for Storybook?
I was able to find documentation here:
https://github.com/storybookjs/storybook/tree/47f753f5e8d084b4d544cf1ec76077a9382aa6b2/app/vue3
I learned that you are able to access the app created by Storybook in .storybook/preview.js by importing it from #storybook/vue3.
Example is copied from above link:
// .storybook/preview.js
import { app } from '#storybook/vue3';
app.use(MyPlugin);
app.component('my-component', MyComponent);
app.mixin({
/* My mixin */
});
I'm looking at migrating a Vue 2 app to Vue 3 and ran into a problem. The Vue 2 app used to start with importing a whole lot of components and directives:
// these components register to the global Vue instance
import {ComponentA} from './componenta';
import {directiveA} from './directivea';
// create app (after the components are registered)
new Vue({...})
This worked fine, but when changing this code to Vue3, the app instance is now created instead. This instance isn't actually available when the global directives and components are imported.
What's the recommended way for dealing with this? I can't reorder the imports to the bottom of the file as webpack bundles them always at the top...
The order of imports does not matter in your case - what matters is the order of the JavaScript statements that follow the import section.
You should first create the app instance and only then register your global components to this instance - as explained in https://learnvue.co/2020/08/how-to-register-a-vue3-global-component/
import { createApp } from 'vue'
import PopupWindow from './components/PopupWindow'
import App from "./App.vue"
const app = createApp(App)
app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
app.mount('#app')
I settled with a solution that imports the app instance before component registration/definition (which occur within the component file) in an attempt to keep the current structure.
import {app} from './instance';
import './components/popupwindow';
import App from './app.vue';
const app = createApp(App)
app.mount('#app')
// instance.js
import {createApp} from 'vue';
const app = createApp();
export {app};
// popupwindow.vue
import {app} from '../instance';
// component registration+definition here (for global components only)
app.component('popup', {
...
}
I'd like to use a separate Vue instance to handle events. This approach works in a standard Vue app but throws an error in the Nuxt environment.
Do I need to simply reference it differently?
Code
const Vue = require('vue');
const Hub = new Vue();
export default Hub;
// Usage
import Hub from '~/events/hub';
Hub.$emit(EVENT_TOGGLE_NAVIGATION, true);
Error
Uncaught TypeError: Vue is not a constructor
Environment
nuxt 1.0.0
vue 2.5.17
You need to use import
import Vue from 'vue'