Initial Laravel setup with VueJS + Vue-Router + Vuex in Typescript

When I first started writting single page applications with VueJS in Typescript there were very few practical examples on how to setup all of the things together and the examples I found seemed really complicated. After many tries and frustrating setups I still didn’t feel like it was better than what I had before. In this post I’d like to show how to setup a very clean Typescript application and showcase where it really shines.

You can find all of the project files here.

Initial application

Let’s start off by creating a fresh laravel application and removing the default frontend preset.

▶ laravel new single-page-app
▶ php artisan preset none

There’re still a couple of javascript files that we need to convert to Typescript. Let’s start by renaming .js files to .ts

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

Then modify laravel-mixconfig to compile the Typescript.

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

We also need to include tsconfig.json which is a simple Typescript configuration file. Let’s include the one that’s recommended in VueJS documentation. (https://vuejs.org/v2/guide/typescript.html#Recommended-Configuration)

I’m going to replace requirejs with es6 module imports.
This is how your initial Typescript application should look like:

Note that I type-hinted HTMLMetaElement of document.head.querySelector
This is the only thing we need to type-hint when converting initial preset to Typescript.

Setting up VueJS

First of all we need 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 need to declare it’s module in resources/assets/js/typings.d.ts

Your ExampleComponent.vue file should look likes this.

Note that I’ve written a component in a class-style syntax although you can write it in a more classical way as showed here.

Instantiating VueJS instance is the same as in regular Javascript.

This is it! Your’re ready to write your regular VueJS application in Typescript.

Vue Router

Setting up Vue Router is the easiest part. All you need to do is add it to your dependencies and initiate VueRouter like you normally would.

▶ npm install vue-router --save-dev

Your router.ts

And of course pass it to your VueJS application instance.

Vuex

Vuex really shines when mixed with Typescript. In fact I felt so much in love with it that I can’t imagine writting any vuex stores and modules without Typescript!

To make it more clear let’s write an example store with a todo list.

Don’t forget to add vuex to your dependencies.

npm install vuex --save-dev

We only need to type-hint our store’s states so Typescript can lint our data and it knows if we try to access some data property that’s not expected to be existing.

Then we can create our store.ts in resources/assets/js/store/index.ts

And of course, pass your vuex store to the application instance.

Congratulations! Your’re now ready to build an amazing application on top of this SPA preset.

I also published all of the project files to Github.

TitasGailius/laravel-spa-typescript