This content originally appeared on DEV Community and was authored by Philip John Basile
This is an old topic but the Vue Community is still stuck on Vue2 when it comes to professional projects and I think this little tidbit will help if you encounter some old code.
Vue Class Components provide a more familiar syntax for writing Vue components using classes instead of objects. When combined with TypeScript, you get static typing, better autocompletion, and improved type checking. To get started with Vue Class Components and TypeScript, follow these steps:
Install dependencies:
Make sure you have Node.js and npm installed. Then, create a new project using Vue CLI:
npm install -g @vue/cli
vue create my-project
Choose "Manually select features" and select TypeScript, along with any other features you need.
Install Vue Class Component:
Navigate to your new project folder and install the vue-class-component and vue-property-decorator packages:
cd my-project
npm install vue-class-component vue-property-decorator
Update main.ts:
In src/main.ts, make sure to import Vue from 'vue' and use the necessary plugins:
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
Create a class-based component:
In src/components, create a new file called HelloWorld.vue. This will be your class-based component:
<template>
<div>
<h1>{{ message }}</h1>
<button @click="onClick">Click me</button>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop({ default: 'Hello, World!' }) private message!: string;
private onClick() {
this.$emit('clicked');
}
}
</script>
Here's a breakdown of the code:
- Import Vue, Component, and Prop from the vue-property-decorator package.
- Use the @Component decorator to define the class as a Vue component.
- Extend the Vue class to create your own component class.
- Use the @Prop decorator to define props for the component.
- Define methods and other component properties as class members.
Use your class-based component:
Now you can use your HelloWorld component in another Vue component:
<template>
<div>
<HelloWorld @clicked="onHelloWorldClicked" />
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
@Component({
components: {
HelloWorld,
},
})
export default class App extends Vue {
private onHelloWorldClicked() {
console.log('HelloWorld component was clicked');
}
}
</script>
That's it! You now know the basics of using Vue Class Components with TypeScript. This setup allows you to leverage TypeScript's type checking and code autocompletion capabilities while working with Vue components.
To convert Vue Class Components to normal Vue components, you will need to rewrite the component using the object-based syntax. Here's an example of how you can convert a simple class-based component to a normal Vue component:
<!-- class-based component -->
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
private message = 'Hello, World!';
}
</script>
<!-- converted normal Vue component -->
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
message: 'Hello, World!',
};
},
});
</script>
Here's what we did:
- Remove the @Component decorator and extend the Vue class.
- Define a data function that returns an object with the component's properties and data.
- Use the defineComponent function from the vue package to create the component.
Note that the data function is used to define the component's data, which is similar to the properties defined with the @Prop decorator in Vue Class Components. You can also define other component options, such as methods, computed, and watchers, using similar functions within the defineComponent function.
Keep in mind that the Vue Class Component syntax is often preferred due to its improved readability and reusability. If you are converting a large or complex component, consider refactoring it into smaller, reusable components using Vue Class Components.
This content originally appeared on DEV Community and was authored by Philip John Basile
Philip John Basile | Sciencx (2023-04-30T19:54:12+00:00) Vue Class Components with TypeScript. Retrieved from https://www.scien.cx/2023/04/30/vue-class-components-with-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.