While working with Vue CLI 4.5.x, I tried the following code:
import Vue from "vue"
import App from './App.vue'
new Vue({
el: "#app",
render: h=> h(App)
})
But unfortunately, it gave the following warnings:
"export 'default' (imported as 'Vue') was not found in 'vue'
What I can conclude from this, is that Vue CLI 4.5.x has stopped this way of creating an application where you first create a Vue instance.
To initialize the main application, the official way is as follows:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
I'm not sure if my conclusion is correct or not. It would be a great help if somebody would concrete my conclusion, as so far I have not found any proof of that in official documentation of vue.
Moreover, the later code comes baked with Vue CLI 4.5.* application instance, while former code is true when using the CDN.
You've installed vue 3 using vue-cli 4 and this version has this new global api for creating new app :
import { createApp } from 'vue'
const app = createApp({})
You're still able to create apps using vue 2 based on vue cli 4 but you should indicate the version when you launch new project.
Related
We are integrating Vue into an existing ASP.Net MVC Application
Below code (Vue 2 X)working fine in our .Net Application
new Vue({
el: '#component1',
render: h => h(App)
});
To convert Vue 2 X to Vue 3 X used command "vue add vue-next" , after executing command version changed but "npm run build" command giving error.
You can use the Vue 3 migration build to help with the upgrade. It shims most of the Vue 2 code, while emitting console warnings that help you identify what to migrate.
To enable it in your Vue CLI project (based on installation steps from the migration guide), and to fix the code you mentioned:
Update vue to 3.1, and install #vue/compat of the same version:
npm i -S #vue/compat#^3.1.4
npm i -S vue#^3.1.4
Setup an alias from vue to #vue/compat:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('vue', '#vue/compat')
}
}
Update the app entry to the new global mounting API:
// import Vue from 'vue'
// import App from './App.vue'
// new Vue({ el: '#component1', render: h => h(App) });
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#component1')
'Im using chartkick inside a vuejs project, so I run the following command: npm install vue-chartkick chart.js, and then in the main.js I put the following instructions:
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
But I can't show the results of my web application when running the server is there any one who knows how to fix that here the code of the main.js
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
App.use(VueChartkick)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
I tried to test this one:
<line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"></line-chart>
How can I install an external package in Rollup in VueJS. I'm trying to install VuePortal, but I need to use Vue.use(PortalVue), but I don't where put it.
I tried with a package called rollup-plugin-auto-external, and I put it in:
plugins: [
...
autoExternal(),
...
],
Also I put into the externals's object, but nothing.
Thanks
You don't need a rollup plugin to use PortalVue.
Vue.use(PortalVue) should go in the entry point file, where you setup the root Vue instance (e.g., main.js, index.js, app.js, etc.).
For example:
// main.js
import Vue from 'vue'
import App from './App.vue'
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
new Vue({
render: h => h(App)
}).$mount('#app')
i want add a vue panel in my project : vue-black-dashboard
in documentation :
Vue Black Dashboard is built as Vue plugin so you can simply import it
and use it.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
but i dont know where paste vue-black-dashboard folder
how i can import it to my project
thanks
If you want to import it and use in a local component, just import it in component.
<script>
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
export default {
}
</script>
If you want to import it and use globally, just import it in main.js.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
hello thanks for your answer
import DashboardPlugin from '#/plugins/blackDashboard'
where is the # in this address ?
i want use this template in specify route of my project
when i import it in main.js
This dependency was not found:
#/plugins/blackDashboard in ./src/main.js
To install it, you can run: npm install --save
#/plugins/blackDashboard
How's your plugin file look like? I have a similar issue with having plugins in separate files in /plugins directory and importing them to main.js
What I'm trying to achieve is better structure of plugins to keep them in separate files in folder plugins, rather than storing all the code in main.js
Not sure is it allowed or is it a good practice.
Plugins folder: plugins/toastification.js
import Vue from 'vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
const options = {
position: 'bottom-right'
}
Vue.use(Toast, options)
// export default new Toast() - got error while exporting but it works somehow without export default I don't know why
Part of main.js
// plugins
import vuetify from './plugins/vuetify'
import i18n from './plugins/i18n'
import toastification from './plugins/toastification'
import logger from './plugins/logger'
new Vue({
vuetify,
i18n,
toastification,
logger,
render: h => h(App)
}).$mount('#app')
I created a very basic vue-plugin with some component that will be used in another project. The plugin code can be found here. The plugin works fine when tested independently.
In order to use this plugin in another project, I build the plug-in code with
vue-cli-service build --target lib --name testplugin ./src/index.js
This plugin will never be published to NPM registry and will be used only internally. So to test plugin module in another project, I run npm link on plugin dir and then npm link testplugin in another project.
Then I use it in another project like below -
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from '#/router'
import { testplugin } from 'testplugin'
Vue.config.productionTip = false
console.log(testplugin)
Vue.use(testplugin, { })
Vue.use(VueRouter)
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
The project compiles fine but testplugin is undefined. When I check node_modules directory, I can see my testplugin symlinked there.
I have tried diff approaches with no success. Any pointers would be helpful. Thanks.