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')
Related
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')
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.
Ok so I am trying for the second time to migrate thus far it has been a complete failure it seems that vuetify is not detected, unfortunately I cannot share my full repo since it is work related, but will describe steps and share relevant code.
Project was created with vue-cli 3.3.0 with a vue.config.js file for environment variables.
1) npm uninstall vuetify
2)vue add vuetify
3)npm run serve
my site does not load and I get this error (adding code):
//vue.config.js
module.exports = {
chainWebpack: (config) => {
config.plugin('define')
.tap(([options, ...args]) => {
let env = options['process.env'].VUE_APP_ENV.replace(/"/g,'');
let envMdl = require('./build/' + env.toString() + '.js');
// replace all current by VUE concrente ones to be passed to the app
const processEnv = Object.assign({}, options['process.env'])
Object.keys(envMdl).forEach(function (k) {
processEnv['VUE_APP_' + k] = envMdl[k];
});
const ret = Object.assign({}, options, {'process.env': processEnv});
return [
ret,
...args
]
})
}
}
//vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
},
})
//main.js
import vuetify from './plugins/vuetify'
...
new Vue({
vuetify,
router,
store,
i18n,
render: h => h(App),
...
Error message (and screenshot): Uncaught TypeError: _lib.default is not a constructor
at eval (vuetify.js?402c:6)
The main problem is that Vuetify v1 works under the Stylus preprocessor, and in v2 it works under the SASS preprocessor, and I personally do not recommend migrating to v2 if it is too advanced and even worse if it has custom Vuetify components.
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.
const apolloProvider = new VueApollo({ defaultClient })
Vue.config.productionTip = false
new Vue({
provide: apolloProvider.provide(),
router,
store,
render: h => h(App)
}).$mount('#app')
Im having a problem when i integrated ApolloBoost to my Vue CLI 3. it says "Can't reexport the named export 'visitInParallel' from non EcmaScript module (only default export is available) error in ../node_modules/graphql/index.mjs"
Following are the different ways I had tried out:
1. I tried configuring the vue.config.js
2. using node --experimental-module ../node_modules/graphql/index.mjs
no wonder why it doesn't work.
The way I solved this problem is by installing vue-cli-plugin-apollo.
npm install vue-cli-plugin-apollo
or
yarn add vue-cli-plugin-apollo
Perhaps vue-cli requires vue-cli-plugin-apollo to use vue-apollo.