WEB DEVELOPMENT | ASP.NET CORE | VUE.JS
Update: Using Vue 3 Components in ASP.NET Core without bundler
An update to my article about using Vue.js Components in ASP.NET Core Web Application without JavaScript bundler
This is the long promised update to my article “Using Vue Components in ASP.NET Core without bundler”.
This year I have migrated my projects to Vue 3 and now, I am glad to share with you my experience of upgrading Vue 2 code.
The migration was rather simple and there is not too much to write about. But since there were several requests to write an update with Vue 3, I am doing it now. :-)
Theory
Vue 3 has a list of breaking changes you have to deal with. I will cover here only some of them. Please check the official Vue.js Migration Guide for further details.
Vue.js: Migration from Vue 2 Guide
1. New app instance concept with createApp
Vue 3 has changed the way you create the app instance (A New Global API: createApp)
In Vue 2 we have used new Vue({}) to create a new instance of Vue
In Vue 3 you must use the createApp method to create a new app instance
I still don’t have any JavaScript Bundler in my projects, and use a CDN build of Vue. In this case the method createApp is exposed via the global Vue object:
Or we can just directly use the Vue.createApp()method like this
const app = Vue.createApp({})You can use the same way of initializing for other Vue 3 methods including the Compositions APU methods like ref, computed, watch and etc.
2. Data is now always a function
Vue 2 has different ways of declaring data for the root instance and components.
The root instance has an object directly in the data property:
For Vue 2 components data must be a function:
