How to create the first Vue with TypeScript Application

In this tutorial, I will explain how to create Vue with the TypeScript application. Along with that, will explain how to use bootstrap and mdbvue (material Bootstrap Vue) library inclusion, class-based component creation.

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

Vue application setup

First, you need to install, vue-cli to create and build any Vue application. 

  • npm install -g @vue/cli

To check the Vue version, use vue --version, and You might see the version like this in the terminal. @vue/cli 4.5.11.

 

Create your first Vue with TypeScript Application

Once you install vue-cli, please run the following command to create vue with the TypeScript application. 

vue create sample-vue-data-comm

Once you run the above command from the terminal, several questions will be asked, based on your selection the Vue project will create. 

Step 1:

? Please pick a preset: 

  typescript-vue2-node-sass ([Vue 2] node-sass, babel, typescript, eslint, unit-jest) 

  Default ([Vue 2] babel, eslint) 

  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 

❯ Manually select features

 

Step 2:

? Check the features needed for your project: 

 ◉ Choose Vue version

 ◉ Babel

 ◉ TypeScript

 ◯ Progressive Web App (PWA) Support

 ◯ Router

 ◯ Vuex

 ◉ CSS Pre-processors

 ◉ Linter / Formatter

❯◉ Unit Testing

 ◯ E2E Testing

 

 

Step 3:

Choose a version of Vue.js that you want to start the project with (Use arrow keys)

❯ 2.x 

  3.x (Preview)

 

Step 4:

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 2.x

? Use class-style component syntax? (Y/n) Y

 

 

Step 5:

Vue CLI v4.5.11

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 2.x

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 

  Sass/SCSS (with dart-sass) 

❯ Sass/SCSS (with node-sass) 

  Less 

  Stylus

 

Step 6:

Vue CLI v4.5.11

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 2.x

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: (Use arrow keys)

❯ ESLint with error prevention only 

  ESLint + Airbnb config 

  ESLint + Standard config 

  ESLint + Prettier 

  TSLint (deprecated)

 

 

Step 7:

Vue CLI v4.5.11

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 2.x

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: Basic

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

❯◉ Lint on save

◯ Lint and fix on commit

 

Step 8:

Vue CLI v4.5.11

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 2.x

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: Basic

? Pick additional lint features: Lint on save

? Pick a unit testing solution: 

  Mocha + Chai 

❯ Jest

 

Step 9:

Vue CLI v4.5.11

? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 2.x

? Use class-style component syntax? Yes

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: Basic

? Pick additional lint features: Lint on save

? Pick a unit testing solution: Jest

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? Yes

? Save preset as: vue-app-preset-sample-ts

 

Then it will take few time to install all necessary npm packages, once done you can serve the application.

Also, open the application in VSCode and check the App.vue file, which you could see  <script lang="ts"> for TypeScript support.

 

Simple Bootstrap 4.0 and Material Bootstrap for Vue (mdbvue) integration

Best option to get bootstrap css in your Vue application to use CDN. Open the index.html page under public folder and add the bootstrap CDN there, you can leverage all Bootstrap CSS classes in your vue application.

<!DOCTYPE html>

<html lang="">

 

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<title>

<%= htmlWebpackPlugin.options.title %>

</title>

 

<!-- google font -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

 

<!-- bootstrap 4.0, jquery, popper.js -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

 

<!-- mdbootstrap 4.0 -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mdbvue/lib/index.js"></script>

</head>

 

<body>

<noscript>

<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.

Please enable it to continue.</strong>

</noscript>

 

 

<div id="app"></div>

<!-- built files will be auto injected -->

</body>

 

</html>

 

As in above I have used Material Bootstrap for Vue (mdbvue), you can still use few componet from mdbvue as well. Below is the simple example of using mdbDatatable2. 

 

Thats all you need to incorporate Bootstrap or mdbvue library with your Vue TypeScript application. If you have any other suggestion, please comments below.

Happy Coding!

- LP

Buy me a coffeeBuy me a coffee