CODEWITHSUNDEEP
vue.jsvuetify.js
Bean0341
Bean0341

Reputation: 1697

Vuetify - TypeError: Vue.observable is not a function

I am having an issue installing vuetify in my Visual studio's 2019 project. I am using vuetify 2.3.4 with vuetify-loader 1.6. Vuetify appears to be working, being that I can see styles being presented on one of my v-btn tags. However the console is still showing the following error "TypeError: Vue.observable is not a function". I have attempted a few google searches and haven't found anyone else that has posted about his issue. Any thoughts would be greatly appreciated.

Here is some relevant code:

Main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Vuetify from 'vuetify';
import vuetify from './plugins/vuetify' 

Vue.use(Vuetify);
Vue.config.productionTip = true;

new Vue({
    vuetify,
    router,
    render: h => h(App)
}).$mount('#app');

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Index.html

    <v-app>
        <div id="app"></div>
    </v-app>

component with button

<template>
        <v-btn class="vbtn" small color="blue">Primary</v-btn>
</template>

<script>
    export default {
        name: 'Button'
    };
</script>

<style scoped>
</style>

Image of Vuetified button:

enter image description here

enter image description here

Upvotes: 1

Views: 4240

Answers (2)

we_are_unlimited
we_are_unlimited

Reputation: 31

the Vue.observable has been integrated from version 2.6.0 of vueJS https://v2.vuejs.org/v2/api/#Vue-observable it is therefore necessary to update the library with the following command

with npm : npm update vue

with yarn : yarn upgrade --latest vue

Upvotes: -1

Eric Guan
Eric Guan

Reputation: 15992

You're using an older version of vue that doesn't have Vue.observable, which is available starting from [email protected]

Upvotes: 6

Related Questions