I have a new Vue project by vue-cli3. When I used these commands, I got an undefined type error. Here's code
import Vue from 'vue'
The error message:
Uncaught TypeError: Cannot read property 'use' of undefined
When running console.log(Vue) in the browser shows "undefined" ,and I'm sure that I have installed Vue. Using absolute path to find Vue, but I don't see my node_moudles accessible folder in the code.
import Vue from 'vue'
import VueRouter from 'vue-router'
const Home = () => import('../views/home/home')
const Cart = () => import('../views/cart/Cart')
const Category = () => import('../views/category/Category')
const Profile = () => import('../views/profile/Profile')
console.log(Vue);
Vue.use(VueRouter)
Bowser report methods of use is undefined
Related
I am creating a frontend and a backend application inside one Vue 3 project. Everything works fine except that app.js is throwing following error, depending on which component is visited in the browser.
I you visit the app.vue:
[Vue warn]: Failed to mount app: mount target selector "#cms" returned null.
and if you visit the cms.vue:
[Vue warn]: Failed to mount app: mount target selector "#app" returned null.
The mounting file app.js looks like this:
require('./bootstrap');
import {createApp} from 'vue';
import app from "../vue/app";
import cms from "../vue/cms";
import router from "./router";
createApp(app)
.use(router)
.mount("#app");
createApp(cms)
.use(router)
.mount("#cms");
Is there any way I can prevent the browser warning?
You could query the document for those elements, and only mount the ones that exist:
const appEl = document.querySelector('#app');
if (appEl) {
createApp(app).use(router).mount(appEl);
}
const cmsEl = document.querySelector('#cms');
if (cmsEl) {
createApp(cms).use(router).mount(cmsEl);
}
Im trying to load vue-native-websockets in quasar but Im kind of lost.
I tried to run this as a boot file in quasar:
import VueNativeSock from 'vue-native-websocket'
export default async ({ app, router, store, Vue }) => {
Vue.use(VueNativeSock, 'ws://127.0.0.1:5679', {
store: store,
//format: 'json',
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 3000
})
}
and then:
this.$socket.send("my value");
in a function in my component but I guess I missunderstand the concept. Im pretty new to quasar so a working example would be great indeed ...
I can run this by just creating a connection locally in the component I want to use by putting this in the create method:
this.connection = new WebSocket("ws://127.0.0.1:5679/");
and then using that in a method like:
this.connection.send("myValue")
but the goal is to be able to use the connection in whatever component I like without creating it locally in the create function in that component ...
How can I achieve this?
UPDATE
when using:
https://www.npmjs.com/package/vue-native-websocket-vue3
I get this errormessage after implementing it in main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
import VueNativeSock from "vue-native-websocket-vue3" ;
Vue.use( VueNativeSock , 'ws://127.0.0.1:5679' );
Errormessage:
property '$socket' of undefined
at Object.install (vueNativeWebsocket.common.js?9cca:3701)
at Function.Vue.use (vue.runtime.esm.js?5593:5107)
at eval (index.js?a18c:10)
at Module../src/router/index.js (app.js:1147) 1: https://quasar.dev/
Anyone know a way to insert a telephone field with a country code dropdown similar to the one in the link for vue3?
https://www.npmjs.com/package/vue-tel-input
I had tried to use the package in the link but it throws the following error in console.
Uncaught (in promise) TypeError: selfHook.bind is not a function
attempted implementation:
main.js
import { createApp } from 'vue'
import VueTelInput from 'vue-tel-input'
const app = createApp(App);
app.use(VueTelInput)
app.mount('#app');
in the App.vue I just imported it like a component using the following code:
<vue-tel-input></vue-tel-input>
Someone posted on an open issue regarding Vue3 support for the library that they have created a Vue3 version of it: https://github.com/victorybiz/vue3-tel-input
I have tried it and it seems to work fine!
This library supports Vue 3 now. https://iamstevendao.github.io/vue-tel-input/documentation/next.html
npm install vue-tel-input#next
import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';
const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');
...
<template>
<vue-tel-input v-model="phone"></vue-tel-input>
></template>
I am learning Vue.js.
I have this code which runs fine :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
Now I would like to add some import, for example 'axios'. This code does not run :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router).use(axios)
app.mount('#app')
The error is:
Uncaught RangeError: Maximum call stack size exceeded
at merge (utils.js?c532:276)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.
You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')
and in child component reference it like :
this.axios
Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).
What I usually do in my code is the following:
import Vue from 'vue';
import axios from 'axios';
// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;
// Instantiate the main vue app.
let app = new Vue({
//
});
This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.
Additionally:
Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.
If you want to make it especially nice (or convoluted), you can use the following syntax:
Vue.use({
install(v) {
v.prototype.$http = axios;
// Do other stuff like adding mixins etc.
}
})
This may clear up your code if you move this code to another file, so it could end up like this:
import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
Have a Vue app with axios setup and is using it as this.$http.get in the components and that is working fine.
In running the specs using Jest I get an error: Cannot read property 'get' of undefined
I know I can mock axios with maxios. How do I get Jest to recognise $http so it does not throw an error?
You'll need to create a local instance of Vue for your tests, to which you introduce the Vue Plugins you are using, such as axios.
import { createLocalVue, shallowMount } from "#vue/test-utils"
import axios from 'axios'
import VueAxios from 'vue-axios'
const localVue = createLocalVue();
localVue.use(VueAxios, axios)
and later, in your actual tests:
it('should mount the component where I want to use $http', () => {
const wrapper = shallowMount(MyApiComponent, { localVue });
... do stuff to wrapper here ...
})