Setup Typescript In Your Laravel Vue Application

Hello Laravel and Vue Js lovers, in this brand new tutorial i will show you how you can work with Laravel vue js and Typescript. In this quick example i will show you how you can setup vue js with typescript in your Laravel application.

You know that vue js support typescript. Now i am working with a project where i setup vue js with typescript. That's why i decided to share it with you that how we can setup typescript with vue js, vue router and vuex. 

So from this vue typescript example tutorial you will learn how to setup typescript with vue js vue router and vuex in laravel application. So let's start. 

You know that we some javascript file. So we need to convert it into typescript. Let's do it one by one. Let’s start renaming .js files to .ts

resources/assets/js

resources/assets/js/app.js       -> resources/assets/js/app.ts
resources/assets/js/bootstrap.js -> resources/assets/js/bootstrap.ts

Then modify laravel-mix config to compile the Typescript file

// webpack.mix.js
mix.ts('resources/assets/js/app.ts', 'public/js')
   .vue()

We need to include tsconfig.json which is a simple Typescript configuration file in our root directory.

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
        "experimentalDecorators": true,
    },
    "include": [
        "resources/assets/js/**/*"
    ]
}

Now update bootstrap.js like below

resources/assets/js/bootstrap.js

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from "axios"

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token: HTMLMetaElement | null = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Setting up VueJS with Typescript

First of all we have to add “vue” and “vue-class-component” as our npm dependencies

npm install vue vue-class-component --save-dev

To be able to import vue components we have to declare it’s module in resources/assets/js/typings.d.ts

resources/assets/js/typings.d.ts

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

Now your ExampleComponent.vue file should look likes this.

resources/assets/js/components/ExampleComponent.vue

Instantiating VueJS instance is the same as in regular vue js style.

resources/assets/js/app.ts

/**
 * First, we will load all of this project's Javascript utilities and other
 * dependencies. Then, we will be ready to develop a robust and powerful
 * application frontend using useful Laravel and JavaScript libraries.
 */

import "./bootstrap"
import Vue from "vue"
import ExampleComponent from "./components/ExampleComponent.vue"

Vue.component('example', ExampleComponent)

new Vue({
    el: '#app'
})

All are set to go. No You’re ready to write your regular VueJS application in Typescript.