Example project using TypeScript with Laravel Mix
Switch branches/tags
Nothing to show
Clone or download
Latest commit ec46bc7 May 17, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app First commit May 15, 2017
bootstrap First commit May 15, 2017
config First commit May 15, 2017
database First commit May 15, 2017
public Allow TypeScript in Vue components May 17, 2017
resources Allow TypeScript in Vue components May 17, 2017
routes First commit May 15, 2017
storage First commit May 15, 2017
tests First commit May 15, 2017
.env.example First commit May 15, 2017
.gitattributes First commit May 15, 2017
.gitignore First commit May 15, 2017
README.md Update README.md May 17, 2017
artisan First commit May 15, 2017
composer.json First commit May 15, 2017
composer.lock First commit May 15, 2017
package.json Update deps May 15, 2017
phpunit.xml First commit May 15, 2017
server.php First commit May 15, 2017
tsconfig.json First commit May 15, 2017
webpack.mix.js Allow TypeScript in Vue components May 17, 2017
yarn.lock First commit May 15, 2017

README.md

Laravel Mix TypeScript Example

A minimal example project on how to get started with Laravel Mix and TypeScript.

🔗 Blog post with detailed explanation: https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix

Adding TypeScript Support to Laravel Mix

This repository contains the result of a project that supports TypeScript. Here's the recipe for adding support to your own application.

  1. Install dependencies: yarn add typescript ts-loader (see package.json)
  2. Create a tsconfig.json, or generate one with node_modules/.bin/tsc --init (see tsconfig.json)
  3. Add ts-loader and register TypeScript file extensions in webpack.mix.config (see below snippet or webpack.mix.js)
  4. Set up the appendTsSuffixTo option if you want to use TypeScript in .vue files too (optional)
mix.webpackConfig({
       module: {
           rules: [
               {
                   test: /\.tsx?$/,
                   loader: 'ts-loader',
                   options: { appendTsSuffixTo: [/\.vue$/] },
                   exclude: /node_modules/,
               },
           ],
       },
       resolve: {
           extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
       },
   });

License

The MIT License (MIT). Please see License File for more information.