Vue.js 3: Cannot import Vue global object - vue.js

I'm going crazy trying to reconcile the Vue 3 CLI output into something that works with various tutorials and plugins that all use the Vue object, as in Vue.createApp(.... In my project, I can use
import {createApp} from 'vue';
createApp(...
but import Vue from 'vue'; results in Vue still being undefined. I have Vue 3 installed via NPM. Clearly there is something critical that I don't understand about NPM imports, how could the {createApp} import work if importing the whole module does not work?
From package.json:
"dependencies": {
"#babel/polyfill": "^7.12.1",
"apexcharts": "^3.22.1",
"core-js": "^3.6.5",
"d3": "^6.2.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.1",
"vue3-apexcharts": "^1.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
Here is my temporary main.js. This prints 'undefined' followed by the correct createApp function definition:
import Vue from 'vue';
import {createApp} from 'vue';
console.log(Vue);
console.log(createApp);

If you're working with CDN Vue is available as global variable which could be used to create instance by calling the method createApp like Vue.createApp({...}), but if you're working with a bundler which uses npm modules, there no Vue object imported from vue module so you should import createApp from it to create a new instance like :
import {createApp} from 'vue';
let app=new createApp({...})
app.use(somePlugin)
app.mount("#app")
for more details please check the migration guide of global API

Related

vue_commonjs2_vue_root_Vue_default.a is not a constructor

I am new to VueJs and working on migrating existing app from vue2 to vue3.
I did all steps mentioned on Vue's migration doc still facing this issue.
Let me know if I am missing something here.
package.json
"dependencies": {
"vue": "^3.1.0",
"vue-router": "^4.0.0",
"vuex": "^4.0.0",
"#vue/compat": "^3.1.0",
"#vue/runtime-core": "^3.2.37"
... and other deps
},
devDependencies: {
"#vue/cli-plugin-babel": "4.5.0",
"#vue/cli-plugin-eslint": "4.5.0",
"#vue/cli-service": "4.5.0",
"#vue/compiler-sfc": "^3.1.0",
"vue-loader": "^16.0.0"
...& other depns
}
main.js
import Vue, {createApp, configureCompat } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n';
import localdev from './localdev.js'
configureCompat({
OPTIONS_BEFORE_DESTROY: false,
WATCH_ARRAY: false,
RENDER_FUNCTION: false,
CUSTOM_DIR: false,
INSTANCE_EVENT_EMITTER: false,
ATTR_FALSE_VALUE: false
});
const app = createApp(App);
app.use(router);
app.use(i18n.i18n);
app.use(store);
app.mount('#app');
Getting this error in browser console.

The vuetify-loader does not automatically bootstrap my variables

I create project using vue-cli and install vuetify using
vue-cli.
I create a folder called sass in my src directory with a file named variables.scss.
Documentation says (https://vuetifyjs.com/en/features/sass-variables/):
The vuetify-loader will automatically bootstrap your variables into
Vue CLI’s compilation process, overwriting the framework defaults.
My files:
src\plugins\vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
src\scss\variables.scss
$body-font-family: Arial, serif;
$border-radius-root: 6px;
$font-size-root: 10px;
src/App.vue
<template>
<v-app>
<v-app-bar app color="primary" dark>
<v-btn>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
//
}),
};
</script>
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount("#app");
package.json
...
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#mdi/font": "5.9.55",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"roboto-fontface": "*",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "~2.4.5",
"vue-template-compiler": "^2.6.11"
}
...
I don't have any effect for my vuetify css, what's wrong?
The automatic loading of global Vuetify variables requires using vuetify-loader instead of the full bundle of Vuetify (which you appear to be using in plugins/vuetify.js).
Your Vuetify setup should look similar to this:
// plugins/vuetify.js
import Vue from 'vue'
// ❌
//import Vuetify from 'vuetify'
//import 'vuetify/dist/vuetify.min.css'
// ✅
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({/* options */})
However, the easiest solution might be to re-run the Vuetify command (vue add vuetify), and choose Yes for Use a-la-carte components? (this is the step that sets up vuetify-loader). The command would edit your files and install the required dependencies to enable vuetify-loader.
demo

Vuetify error: Unknown custom element: <v-app-bar> - did you register the component correctly?

When i normal start my app (npm run serve) it's all right. But when i want start Unit testing with Jest, the console gives me an error:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Can someone help me?
plugins/vuetify.ts
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json
"dependencies": {
"#vue/composition-api": "^1.0.0-rc.5",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vuetify": "^2.4.0",
"webpack": "^4.45.0",
"webpack-assets-manifest": "^4.0.1"
},
"devDependencies": {
"#mdi/font": "^5.9.55",
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-jest": "^4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^1.0.3",
"eslint": "^6.7.2",
"eslint-formatter-gitlab": "^2.2.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0-beta.4",
"node-sass": "^4.12.0",
"prettier": "^2.2.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
Probably you aren't creating a correct Vue instance in your unit test. Take a look at vuetify website, there is a section about unit testing where they explain how to add vuetify to a localVue instance
I think that i creating Vue instance correctly, i don't see error.
top-filter.spec.ts:
import TopFilter from '#/layout/TopFilter.vue'
import Vuetify from 'vuetify'
import { shallowMount, Wrapper, createLocalVue } from '#vue/test-utils'
import Vue from 'vue'
describe('topFilter.vue', () => {
let vuetify: Vuetify, wrapper: Wrapper<Vue>
beforeEach(() => {
const localVue = createLocalVue()
vuetify = new Vuetify()
wrapper = shallowMount(TopFilter, {
localVue,
vuetify
})
})
it('renders', () => {
expect(wrapper.exists()).toBe(true)
})
})

Getting "export 'createStore' was not found in 'vuex' warning

I'm new to all these and now learning Vue.
I have install Vuex, use export default, and import it but still getting this error =>
WARNING Compiled with 1 warnings
warning in ./src/store/index.js
"export 'createStore' was not found in 'vuex'
The index.js store file
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import coachesModule from './modules/coaches/index.js';
const store = new Vuex.Store({
modules: {
coaches: coachesModule
}
});
export default store;
The package.json file
{
"name": "vue-first-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.5",
"vuex": "^3.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
}
}
After uninstalling Vue using
npm uninstall -g #vue/cli
and reinstall Vue Using
npm install -g #vue/cli#latest
npm i vue vue-router -S
npm install
now still im getting :
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 1 warnings 3:56:20 PM
warning in ./src/store/index.js
"export 'default' (imported as 'Vue') was not found in 'vue'
Anyone can help me?
Upd.
You use vue3 and vuex3, but you should use vuex4.
Can you try to use
const store = new Vuex.Store({
// options
})
instead of
const store = createStore({
// options
})
?
According to this docs https://vuex.vuejs.org/guide/#the-simplest-store .
createStore is Vuex 4 syntax, since you're using vuex 3 you should do :
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
import coachesModule from './modules/coaches/index.js';
const store = new Vuex.Store({
modules: {
coaches: coachesModule
}
});
export default store;
I had the same problem using Quasar as a UI framework and got it solved by running
yarn add vuex#next
or if you are using npm
npm install --save vuex#next
then rebuilding the project got everything running again.
more details in this ref: https://www.codegrepper.com/code-examples/whatever/%22export+%27createStore%27+was+not+found+in+%27vuex%27
what this did in the background was changing the "vuex":"^3.6.2" to "vuex": "^4.0.2"

Ionic vue plugin

I am trying to create an ionic-vue app following this post but I get Cannot convert undefined or null to object error, when I register #ionic/vue plugin in main.js.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Ionic from '#ionic/vue'
import '#ionic/core/css/ionic.bundle.css'
Vue.use(Ionic)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Package.json
"dependencies": {
"#ionic/core": "^4.6.2",
"#ionic/vue": "0.0.4",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
}
It seems to be a problem with ionicons. According to this thread adding ionicons#4.5.9-1 fixes the issue.