How to Seamlessly Integrate TypeScript with Laravel Vite + Inertia.js

Why Integrate TypeScript with Laravel + Vite + Inertia.js?

Laravel has become a go-to PHP framework for modern web applications. Paired with Vite for fast frontend builds and Inertia.js for a smooth SPA experience, it delivers a powerful stack. But adding TypeScript brings the extra power of static typing, better IDE support, and fewer bugs.

This guide walks you through integrating TypeScript into a Laravel app that uses Vite and Inertia.js. It’s designed for developers who already have some experience with Laravel and want to modernize their frontend workflow.

Key Takeaways

• Learn how to configure TypeScript in a Laravel + Vite + Inertia.js project
• Understand folder structure and build workflow
• Discover best practices for scalable frontend architecture
• Access to external resources, repos, and YouTube guides

Prerequisites

Make sure you have the following installed:

• Node.js (v16+)
• Laravel (v10+)
• Composer
• PHP (v8.1+)
• NPM or Yarn
• A Laravel project set up with Inertia.js (Vue 3)

If not, install Laravel with Inertia and Vue 3:

composer create-project laravel/laravel my-app
cd my-app
composer require inertiajs/inertia-laravel
php artisan inertia:middleware
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@next

Step-by-Step Integration Guide

Step 1: Install TypeScript

npm install --save-dev typescript
npx tsc --init

This generates a basic tsconfig.json. We’ll tweak it next.

Step 2: Configure tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "baseUrl": "./resources/js",
    "paths": {
      "@": ["./"]
    }
  },
  "include": ["resources/js/**/*"],
  "exclude": ["node_modules"]
}

Step 3: Rename .js Files to .ts

Start with your app.js or main.js file. Rename it to app.ts.

mv resources/js/app.js resources/js/app.ts

Then adjust imports if needed:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

Step 4: Configure Vite for TypeScript

Your vite.config.js should be renamed to vite.config.ts:

mv vite.config.js vite.config.ts

Update Vite config:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js')
    }
  }
});

Step 5: Install Vue 3 Types

npm install --save-dev @types/node
npm install --save-dev vue-tsc

Create shims-vue.d.ts in resources/js:

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

Folder Structure

Here’s an ideal file structure post-setup:

resources/
├── js/
│   ├── Pages/
│   ├── Components/
│   ├── app.ts
│   ├── shims-vue.d.ts
│   └── tsconfig.json
vite.config.ts

Optional: ESLint + Prettier for TS

Install tools:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue prettier eslint-config-prettier

Create .eslintrc.js:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  rules: {
    // Custom rules here
  }
};

Example Component in TypeScript

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    title: String
  },
  setup(props) {
    return { props };
  }
});
</script>
<template>
  <h1>{{ props.title }}</h1>
</template>

FAQ

Is TypeScript required for Laravel + Inertia?

No, but it’s highly recommended for larger projects due to better type safety.

Will this affect Laravel’s backend?

No. TypeScript is strictly on the frontend.

Can I use React instead of Vue?

Yes. Inertia supports both Vue and React. Setup is similar.

Useful Resources

• Official Inertia.js Docs
• Laravel Vite Docs

Conclusion

Integrating TypeScript into your Laravel + Inertia + Vite stack gives your frontend code more stability and maintainability. It’s especially useful in teams or complex apps. By following the steps in this guide, you now have a modern setup ready to scale.

Next Steps:

• Start refactoring existing components to .ts
• Use interfaces and types for props and responses
• Consider Vuex or Pinia with typed state