Vue Class Based Components

Posted on  by admin

Initial Data Declartion

If we prefer to use classes, we can use the class-based components API that comes with Vue. In this article, we’ll look at how to developing Vue apps with class-based components. To add computed properties into class-based components, we can add getters and setters into our class.

For instance, we can write:. We have an input that’s bound to the name computed property with v-model . In the component class, we have the firstName and lastName reactive properties.

Below that, we have the name getter method that returns the firstName and lastName combined. And then we add a name setter that gets the value and split it with split .

Function-based/Composition API

Then we assign the split values back to this.firstName and this.lastName .

  • The mounted hook lets us run code when the component is mounted. And the render hook lets us render template content in the class component:.
  • We replaced the template tag with the render method. We can register components with the components property in the object we pass into the Component decorator.
  • For instance, we can write:. to register the Component that we created.

If we want to add other hooks into our Vue class-based components, we’ve to register them. For instance, we can write:. We add Vue Router into our Vue app with the routes array in main.js . Then we create the VueRouter instance with the routes array.

Officially maintained

And we call Vue.use(VueRouter); to register the components and component methods. And we pass router into the Vue instance.

In App.vue , we add the router-link s and router-view to let us render the routes and the links that we can click on to navigate through the routes.

Then we register the Vue Router hooks in Foo.vue and Bar.vue with Component.registerHooks .

Please pick a presetManually select features
Check the features needed for your projectTypeScript
Use class-style component syntax?Yes

We pass in the strings with the hook names into the array. Then finally, we add the methods with the same name in the component classes. Now when we navigate through the pages, the hooks will run.

We can add computed properties and hooks into our Vue class-based components.

Modified2 months ago. I wanna upgrade my vuejs project to typescript based on class components, but i read in vue issue's :.

Component Properties

Update: the Class API proposal is being dropped. so what will happen to existing class component-based projects?and more important, based on this article: which says. Since we are not using the class-style syntax, you use the as keywordto declare data as a data type.

is this way of using typescript safe in vue3.0? 22 gold badges2727 silver badges5050 bronze badges.

5050 bronze badges. Currently there is no official class-based API.

RFC was about adding one but was dropped for the reason discussed there. Existing projects are using vue-class-component library which builds on top of official object-based component API (officially called Options API).

This should continue to work in 3.0 (because Options API stays the same) but suffer from the same drawbacks mentioned in the RFC. Here is a comment from maintainer declaring support for Vue 3. Second linked article is using TypeScript without vue-class-component - no classes, just regular object-based component API + TypeScript type annotations.


So yes, this will work in 3.0. However if you are starting with TypeScript in Vue now, I would strongly recommend to take a look at the new composition API which will be added in 3.0.

It's an official API (not a library) and has many benefits compared to any existing solution. You can even use Composition API with Vue 2 thanks to composition-api - this is plugin but plan is in place to make it official, better integrated into Vue core and maintained by Vue core team.

33 gold badges4343 silver badges6767 bronze badges.

6767 bronze badges. I'm created a vue 3 class components based on composition API.

Use it if found any bugs, or forgotten features from composition API issue. Veyis AliyevVeyis Aliyev. Modified1 month ago. When I started working with vue 3, I saw these notions :.

To use vuex-class

Object-based API. Function-based API. Class-Based API. Composition API. Can some one tell us the definitions of these?

I added Options API and Reactivity API. Note that the main docs mention Options-based, and not Object-based, but even in references by Evan, they seem to be interchangeable.

Option-based API is Class-based and Function-based API is Composition API.

Option-based vs Function-based express, what I would call, the theoretical model of how to differentiate the APIs.

TypeScript Friendly

Whereas Class-based vs Composition differentiate between the implementation. You have the old way used by vue1 and vue2, called class-based, which is referred to as Option-based API.

The naming implies that the component is defined by options. You may think of the options as data, computed, methods etc..

They define how a component works by using a set of pre-defined options that you overload.

The downside of this way of defining functionality is that you have the actual component logic distributed between various "options", which makes it harder to understand from the code what the component actually does.

Function implies that we're declaring functionality of the component (not that it's using functional components). The Composition API makes the code easier to reuse (since you don't need to tightly-couple aspects of functionality to a component) and easier to read and maintain (since you can encapsulate functionality in smaller, dedicated units).

Readable class rather than an odd JS Object

1515 gold badges8686 silver badges133133 bronze badges. 133133 bronze badges. Arranging my thoughts for vue-class-component to shorten my explanation 🤕.

vue-class-component provides @Component decorator to write Vue components with JS/TS Class style. There are some reasons I prefer to use this style. TypeScript Friendly. To use vuex-class. Officially maintained.

Vue component works by giving JS Object which fulfills Vue’s expectation. Firstly, there are many members. ‘data’ should be a function which returns an object (If reused in a couple of places, “must be”, if not, “doesn’t matter”).

computed has functions which return value for a template. methods has functions which are fired by template or other function.