https://github.com/kabbouchi/laravel-mix-vue3

A Laravel Mix extension for Vue 3, Typescript and JSX.
https://github.com/kabbouchi/laravel-mix-vue3

jsx laravel laravel-mix tsx typescript vue vue3

Last synced: about 1 month ago
JSON representation

A Laravel Mix extension for Vue 3, Typescript and JSX.

• Host: GitHub
• URL: https://github.com/kabbouchi/laravel-mix-vue3
• Owner: KABBOUCHI
• Created: 2020-07-29T14:18:30.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-15T11:12:49.000Z (almost 4 years ago)
• Last Synced: 2024-10-29T23:57:22.460Z (about 2 months ago)
• Topics: jsx, laravel, laravel-mix, tsx, typescript, vue, vue3
• Language: JavaScript
• Homepage:
• Size: 22.5 KB
• Stars: 24
• Watchers: 4
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Laravel Mix v5 - Vue 3

A Laravel Mix extension for Vue 3, Typescript and JSX.

Deprecated use [Laravel Mix v6](https://laravel-mix.com/docs)

## Usage

First, install the extension.

```bash

npm install laravel-mix-vue3 --save-dev

//or

yarn add laravel-mix-vue3 -D

```

Make sure to install the below if Laravel Mix failed to install them

```

npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3  --save-dev

// or

yarn add @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 -D

```

Then, require it within your `webpack.mix.js` file, like so:

### Basic

```js

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.js", "public/js");

```

### Enable Typescript

```js

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.ts", "public/js", {

  typescript: true,

});

```

### Enable JSX

```js

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.jsx", "public/js", {

  jsx: true,

});

```

### Enable TSX

```js

const mix = require("laravel-mix");

require("laravel-mix-vue3");

mix.vue3("resources/js/app.tsx", "public/js", {

  typescript: true,

  jsx: true,

});

```