Vue CLI 3 + TypeScript: A quick-start guide
Creating a project
Note that the following steps can also be achieved on the Vue GUI — to open it type Vue ui into your command line.
Start off by creating a Vue CLI project as normal:
# Install Vue CLI if it isn't already installed
npm install --global @vue/cli
# Create a new project
vue create my-project-name
create-project.bat
When prompted, choose ‘Manually select features’ and then select TypeScript. Select any other features that you would like.
Further options
After this, you’ll be asked to select additional options.
Use class-style component syntax? Vue TypeScript components can be written in either of two ways:
Answer Yes to install the libraries needed to write class-style components.
Pick a linter / formatter config:
Choose TSLint for appropriate TypeScript syntax checking and analysis.
Wait for the project to be created, and then type npm run serve to see it live.
Project structure
Your folder structure will look similar to a typical Vue CLI project. Some files are specific to TypeScript projects:
Project:
| babel.config.js
| package-lock.json
| package.json
| postcss.config.js
| README.md
| tsconfig.json
| tslint.json
| .browserslistrc
| .gitignore
|
+---node_modules
|
+---public
| | favicon.ico
| | index.html
| | manifest.json
| | robots.txt
| |
| \---img
| \---icons
|
\---src
| App.vue
| main.ts
| registerServiceWorker.ts
| router.ts
| shims-tsx.d.ts
| shims-vue.d.ts
| store.ts
|
+---assets
| logo.png
|
+---components
| HelloWorld.vue
|
\---views
About.vue
Home.vue
tsconfig.jsonDenotes a TypeScript project. Contains compiler options and specifies the location of root files.
tslint.jsonOptions and rules for Typescript linting, for TSlint.
main.ts The equivalent of main.js; the entry file for the project.
shims-tsx.d.ts Allows the use of .tsx files. Read more about this here.
shims-vue.d.ts Allows .vue single file components to be imported and used.
Writing components
We can now write TypeScript in .vue single file components, within the script tags.
<script lang="ts"></script>
Components are written using either Vue.extend() or the @Component decorator. Choose the way that is best suited to your needs.
Basic usage, with Vue.extend()
Similar to declaring a normal Vue component. Vue.extend() is used so that the code inside can be subject to type inference.
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
props: {
msg: String,
},
});
</script>
<style scoped lang="scss">
</style>
[Vue.extend()] HelloWorld.vue
Class-style, with @Component decorator
Decorators, such as @Prop, @Watch, @Emit, are used to define the component.
This is achieved using a combination of two libraries, vue-class-component and vue-property-decorator.
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<style scoped lang="scss">
</style>
[@Component] HelloWorld.vue
IDE support for TypeScript
TypeScript support and features are available with these IDEs:
Thanks for reading!
Suggest:
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Learn Vue.js from scratch 2018
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Build a Quiz App Using Vue JS | Vue JS Quiz App Demo | Vue JS Project Tutorial | Simplilearn