![vue 3 vue 3](https://www.vuescript.com/wp-content/uploads/2021/03/Lite-Data-Table-Component-For-Vue-3.png)
Also note that the template is not changed as the Composition API only affects the way we define the component functionality, not the way we render it.įirstly, notice we import the ref function which allows us to define a reactive variable modalOpen. Let's now refactor our App component to use the Composition API.īefore I explain the code, be clear that all we're doing is refactoring - the functionality of the component will be the same. This new API allows you to define component functionality using a setup function rather than with properties you add to the component definition object. The flagship feature of Vue 3 is the Composition API. In Vue 3, thanks to a feature called fragments, it is no longer compulsory to have a single root element! That's right - there are two root elements. Notice anything odd about this template? Look again. Let's also insert a paragraph of text into the slot for content. We'll also use our just-created modal component which will be rendered conditional on the value of modalOpen. We'll create a button to open the modal which will trigger the toggleModalState method. Let's now create the template for our root component. Let's also make a new component for the modal feature: $ touch src/Modal.vueįor now, we'll provide a minimal template including a slot for content. Moving over to the root component now, let's re-add the state and method to this component: Src/main.js createApp(App).mount("#app") While we're at it, let's simply the syntax a little by removing the app variable: This means the App component is not just rendered by the root instance but is the root instance. To do this, we can remove the root instance definition and instead pass the App component. We can still do that, but Vue 3 has an even easier way - making App a root component. The difference is that with Vue 2, we'd normally use a render function for doing this: Now we can get the root instance to render that component.
![vue 3 vue 3](https://www.bacancytechnology.com/blog/wp-content/uploads/2020/10/09-10-2020-Thursday-–-16.png)
The best practice for Vue 2 is to create a minimal template for the root instance and create an App component where the main app markup will be declared. If you go to the browser now and check the console, you'll see the warning "Component is missing render function", since we haven't yet defined a template for the root instance. Learn more: Data object declaration removed RFCīefore we move on, let's also add a method to toggle the modalOpen value. Since having two types of declarations is not beginner-friendly, it was decided to remove this feature. The use case for this is rare and can be worked around. The advantage of using an object for data rather than a factory function is that, firstly, it was syntactically simpler, and secondly, you could share top-level state between multiple root instances e.g.: This is what you had to do for Vue components, but now it's enforced for Vue app instances as well. Instead, data must be assigned a factory function which returns the state object. Under Vue 2, we could do this by creating a data property on our app instance and assigning an object to this where our modalOpen property would be declared i.e.: Let's manage this with a boolean state property modalOpen which we'll give an initial value of false. Our modal window can be in one of two states - opened, or closed. Under the new API, calling createApp returns a fresh app instance that will not be polluted by any global configuration applied to other instances. This really shows up as an issue in unit testing, as it makes it tricky to ensure that each test is isolated from the last.
![vue 3 vue 3](https://topdev.vn/blog/wp-content/uploads/2020/05/nhung-nguyen-tac-chung-ma-vue-3-da-ap-dung-khi-thiet-ke.png)
With the old API, any global configuration we added (plugins, mixins, prototype properties etc) would permanently mutate global state. Next, we'll call the mount method on app and pass a CSS selector indicating our mount element, just like we did with the $mount instance method in Vue 2. We then call this method, passing our Vue instance definition object, and assign the return object to a variable app. Rather than using new Vue(), we now need to import the new createApp method. Straight off the bat, the way we bootstrap a new Vue app has changed. Now we'll run the dev server: $ npm run dev Once that's cloned and the NPM modules are installed, all we need to do is remove the boilerplate files and create a fresh main.js file so we can create our Vue 3 app from scratch. Rather than installing Vue 3 directly, let's clone the project vue-next-webpack-preview which will give us a minimal Webpack setup including Vue 3. Here's what the app looks like in it's opened and closed states so you can picture in your mind what we're working on: I chose this because it conveniently allows me to showcase a number of Vue 3 changes. We're going to build a simple app with a modal window feature.