importing modules in vue3-cli projects

Question

I have been trying to simply load modules such as Jquery and @tensorflow/tfjs but I am not able to make it work. I have installed both of them using npm.

I have created @vue3/cli project and everything works fine until I try to import these two modules.

My main.js file is like this -

import {
    Vue
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/index.css'
import $ from 'jquery'
import tf from '@tensorflow/tfjs'

Vue.config.productionTip = false

Vue(App).use(store).use(router).use(tf).use($).mount('#app')

I know I can simply import JQuery inside every component/views but that to me, looks too clumsy.

How can I import these modules in main.js file and use it wherever I want?

Answer 1

For Vue 3, the import should be:

import { createApp } from 'vue'

createApp(App).use(/*...*/).mount('#app')

Vue.config.productionTip was removed in Vue 3 .

And $ and tf are not Vue plugins, so they won't work with .use() . If you want them to be global properties, use app.config.globalProperties :

const app = createApp(App)
app.config.globalProperties.$ = $
app.config.globalProperties.tf = tf
app.mount('#app')

Then in your component code:

export default {
  mounted() {
    console.log(this.$) // jQuery
    console.log(this.tf) // TensorFlow
  }
}