Enable Typescript in SFC: Laravel 9 + vite + vue-loader

Question

I wanted to create a project using this github repo as a base: https://github.com/suresh-ramani/laravel-vue3-vite

The repo essentially enables a Laravel 9 full stack server-side rendered application to use vue3 within the blade template files. You can mount a vue3 app inside the blade files and import SFC (Single-File Components) ending in .vue to construct the application.

I want to enable Typescript INSIDE THE .VUE FILES. I am already aware of how to use vite to compile a basic .ts file.

Answer 1

I figured out the answer to my own question. To help others I'll take you through the steps. It's way easier than I thought it was going to be.

Step 1: Install TypeScript

System command: npm install typescript

Or

Laravel Sail Command: ./vendor/bin/sail npm install typescript

Step 2: Add lang attribute to your vue files

Add lang="ts" to your <script> tag

<template>
    This is a test
</template>

<script lang="ts">
export default {
    name: "App",
    mounted() {
        const message: string = "Testing 1 2 3"
        console.log(message)
    }
}
</script>

<style scoped>

</style>