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.
Related
I'm using vue-template-loader to load html files in .ts files using decorators, before I use it vuetify was working fine, but after I installed it I got these error messages
[Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Basically: it says that vuetify is not in your app
vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
// Locals
import ar from 'vuetify/src/locale/ar';
import en from 'vuetify/src/locale/en';
Vue.use(Vuetify);
export default new Vuetify({
rtl: true,
lang: {
locales: { ar, en },
current: 'ar',
}
});
vue.config.js
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: ['vuetify'],
configureWebpack: {
module: {
rules: [
{
test: /.html$/,
loader: 'vue-template-loader',
exclude: /index.html/,
},
],
}
},
});
package.json
{
"dependencies": {
"core-js": "^3.8.3",
"moment": "^2.29.3",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.27.1",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-pwa": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-typescript": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "~4.5.5",
"vue-cli-plugin-vuetify": "~2.5.0",
"vue-template-loader": "^1.1.0",
"vuetify-loader": "^1.7.0"
}
}
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
I am using quasar for developing a vue app. I am using vue 3.0.7. I have installed jest and created the jest.config File.
The jest config file contains the following:
clearMocks: true,
moduleFileExtensions: [
"js",
"jsx",
"ts",
"vue"
],
testMatch: [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[tj]s?(x)"
],
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
},
transformIgnorePatterns: [
"\\\\node_modules\\\\",
"\\.pnp\\.[^\\\\]+$"
],
I am writing the following test for a demo vue component:
import { shallowMount} from "#vue/test-utils"
import ComponentVueTest from "./ComponentVueTest"
describe('ComponentVueTest', ()=>{
test("Text shoudl be in the html" , () => {
let wrapper = shallowMount(ComponentVueTest);
expect(wrapper.html).toContain('JustTesting');
})
})
The component that is being tested:
<template>
JustTesting
</template>
<script>
import { defineComponent } from '#vue/composition-api'
export default defineComponent({
setup() {
},
})
</script>
<style>
</style>
and also the package.json dependencies:
"dependencies": {
"#quasar/extras": "^1.0.0",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"#vue/composition-api": "^1.0.6",
"cordova": "^10.0.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^2.6.14",
"vue-loader": "^16.5.0",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.13.14",
"#babel/preset-env": "^7.15.0",
"#quasar/app": "^3.0.0",
"#quasar/quasar-app-extension-testing": "^1.0.3",
"#quasar/quasar-app-extension-testing-unit-jest": "^2.2.2",
"#vue/test-utils": "^2.0.0-rc.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-vue": "^7.0.0",
"eslint-webpack-plugin": "^2.4.0",
"jest": "^27.0.6",
"vue-jest": "^3.0.7"
},
When i run the npm run test ("test": "npx jest") i get the following error:
FAIL src/__tests__/Demo.spec.js
● Test suite failed to run
TypeError: Vue.defineComponent is not a function
> 1 | import { shallowMount} from "#vue/test-utils"
| ^
2 | import ComponentVueTest from "./ComponentVueTest"
3 |
4 | describe('ComponentVueTest', ()=>{
at Object.<anonymous> (node_modules/#vue/test-utils/dist/vue-test-utils.cjs.js:7856:26)
at Object.<anonymous> (src/__tests__/Demo.spec.js:1:1)
I have been trying for hours to fix it and can't seem to understand what is wrong
Try changing:
import { defineComponent } from '#vue/composition-api' to
import { defineComponent } from 'vue'
Also looks like you need to change your wrapper.html to wrapper.text() and add toMatch rather than toContain, that said the following should work:
import { shallowMount} from "#vue/test-utils"
import ComponentVueTest from "./ComponentVueTest"
describe('ComponentVueTest', ()=>{
test("Text should be in the html" , () => {
let wrapper = shallowMount(ComponentVueTest);
expect(wrapper.text()).toMatch('JustTesting');
})
})
The solution to unit testing vue3 in quasar v2 is to use #quasar/quasar-app-extension-testing-unit-jest. Just install it with
quasar ext add #quasar/quasar-app-extension-testing-unit-jest
and it should set up everything for you. Notice it is still in alpha and some components are not fully working yet(for me QPage wasn't working).
Hope this helps somebody :)
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)
})
})
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.