DEV Community

Bijaya Prasad Kuikel
Bijaya Prasad Kuikel

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Install typescript globally on your local machine:

yarn global add typescript
Enter fullscreen mode Exit fullscreen mode

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

yarn add vue@next vue-loader@next @vue/compiler-sfc
Enter fullscreen mode Exit fullscreen mode

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

yarn add ts-loader typescript --dev

Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Compile the assets with the command:

yarn dev
Enter fullscreen mode Exit fullscreen mode

or

npm run dev
Enter fullscreen mode Exit fullscreen mode

Run Laravel server:

php artisan serve
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (3)

Collapse
 
devcriston profile image
Criston Mascarenhas

Is this post on Options API or Composition API im confused.

Collapse
 
willwinberg_64 profile image
William winberg

I got [Vue warn]: Component is missing template or render function. at <App> error :[

Collapse
 
lufunomaphwanya profile image
LufunoMaphwanya

For this example I had to have my welcome.php.blade as: