Getting started with Vue 3 composition API in typescript with Laravel Mix from scratch

Laravel is one of the most loved web frameworks by the developers. It makes development so easier and fun. VueJs is one of the most loved JavaScript and rapidly growing Web Framework. This article will cover steps on implement Vue 3 in TypeScript with Laravel Mix and Composition API from scratch.

Why TypeScript?

Many developers love TypeScript. The reason is it simplifies JavaScript code, as it adds the readability and writability and makes easier to debug. It gives us all the benefits of the modern JavaScript (ES6 & beyond) also can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code.

Let’s get started:

We can start by scaffolding a new laravel app using the command:

laravel new laravue3-ts

Install typescript globally on your local machine:

yarn global add typescript

Now let’s install Vue 3 & Vue loader for webpack:

yarn add vue@next vue-loader@next @vue/compiler-sfc

Also we need to install ts-loader and typescript as dev dependencies:

yarn add ts-loader typescript --dev

Now, let’s generate a tsconfig.json file in the root directory with the following contents on it:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

Now, let’s generate shims-vue.d.ts file inside resources directory which stores the type defination for .vue files with the following content:

declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
}

Now let’s update our webpack.mix.js file:

const mix = require("laravel-mix");
mix.ts("resources/js/app.ts", "public/js").vue({ version: 3 });

Now, let’s add a few components insides resources/js/components directory:

  • Welcome.vue: 
<template>
  Hello {{ name }} welcome to my app.
  <hr />
  <counter></counter>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Counter from "./Counter.vue";
export default defineComponent({
  components: {
    Counter,
  },
  setup() {
    const name = ref<string>("Bijaya");
    return {
      name,
    };
  },
});
</script>
  • Counter.vue: 
<template>
  <button @click.prevent="decrement">-</button>
  {{ count }}
  <button @click.prevent="increment">+</button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "counter",
  setup() {
    const count = ref<number>(0);
    const increment = ():number => {
      return count.value++;
    };
    const decrement = ():number => {
      return count.value--;
    };
    return {
      count,
      increment,
      decrement,
    };
  },
});
</script>

Great, now that we have added the components, now lets rename the default resources/js/app.js to app.ts and update the contents to have following:

import { createApp } from "vue";
import Welcome from "./components/Welcome.vue";
const app = createApp({
    components: {
        Welcome,
    },
}).mount("#app");

Also within our welcome.blade.php update the content to have something like this:

<body>
  <div id="app"></div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>

Compile the assets with the command:

yarn dev

or

npm run dev

Run Laravel server:

php artisan serve

and access: http://localhost:8000

YOU CAN WATCH MY VIDEO ON GETTING STARTED WITH VUE 3 IN TYPESCRIPT WITH LARAVEL MIX FROM SCRATCH HERE:

YouTube:

19

Tags:

Laravelvue3LaravelmixVue3typescript