Getting started with Vue 3 composition API in typescript with Laravel Mix from scratch
Tags: laravelvue3, laravelmix, vue3typescript
Published: 2021-06-28 10:28:26

---
title: Getting started with Vue 3 composition API in typescript with Laravel Mix from scratch
published: true
description: Learn to setup vue3 with composition API in typescript with laravel mix.
tags: laravelVue3, laravelMix, vue3TypeScript
//cover_image: https://direct_url_to_image.jpg
---

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: 
```console
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:
```json
{
  "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:
```ts
declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
}
```

Now let’s update our webpack.mix.js file:
```js
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:

```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:

```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:

```ts
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:
```html
<body>
  <div id="app"></div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>
```
Compile the assets with the command: 
```console
yarn dev
```
or
```console
npm run dev
```
Run Laravel server: 
```console
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: {% youtube n1NW-6Ot-Os %}