How to Setup Typescript in Laravel Vue Application?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hello Laravel and Vue Js lovers,Welcome to in this brand new tutorial. Today i will show you how we can work with Laravel vue js and also Typescript. Here in this quick example i will show you how we can setup vue js with typescript in our Laravel application.i will show you How to Setup Typescript in Laravel Vue Application.

So let we know that vue js is support typescript. These last few weeks, I am working on a Laravel project also with a lot of dynamic interfaces that are heavily dependent on Vue js. Last few of days i am working with a new project where need to setup vue js with typescript. So i decided to share it with you.  How we can setup typescript with vue js, vue router and also vuex. 

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

Setup Typescript in Laravel

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

resources/assets/js

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

Then need to modify laravel-mix config to compile the all Typescript file.

Read Also : Ajax CRUD with Laravel 8 Tutorial with Example for Beginners


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

Now we have to include tsconfig.json which is a very 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 we need to update bootstrap.js like as 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. codingspoint.com . 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 codingspoint 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');
}

Setup Vue JS with Typescript

Here we need to add “vue” and “vue-class-component” as our npm dependencies.

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

For able to import vue components . We need to declare it’s module in resources/assets/js/typings.d.ts file as like bellow code.

Read Also : How to Solve Target Class Does Not Exist In Laravel

resources/assets/js/typings.d.ts

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

Now we need a ExampleComponent.vue file and it should look likes bellow.

resources/assets/js/components/ExampleComponent.vue


<template>
    <h1>This is an example component-codingspoint</h1>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
@Component
export default class ExampleComponent extends Vue {
    //
}
</script> 

instantiating Vue JS instance the same as in as 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'
})

Read Also : PHP Laravel File Upload with Progress Bar Example

Now we are ready to write our regular VueJS application in Typescript.

Thanks for reading my tutorials.You can also Follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →