Vue3、Typescript、JSX用のLaravelMix拡張機能について

インストール

• 下記のパッケージをインストールする www.npmjs.com

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

//or

yarn add laravel-mix-vue3 -D

• Laravel Mixがインストールに失敗した場合は、再度以下をインストールしてください

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

webpack.mix.jsファイルの設定

Vue3の場合

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

require("laravel-mix-vue3");

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

TypeScriptの場合

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

require("laravel-mix-vue3");

mix.vue3("resources/js/app.ts", "public/js", {
  typescript: true,
});

JSXの場合

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

require("laravel-mix-vue3");

mix.vue3("resources/js/app.jsx", "public/js", {
  jsx: true,
});

TSXの場合

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

require("laravel-mix-vue3");

mix.vue3("resources/js/app.tsx", "public/js", {
  typescript: true,
  jsx: true,
});

サンプル

• Vueで記述した場合

<script>
export default Vue {
  data() {
    return {
      name: '',
      locations: [],
    };
  },

  methods: {
    test(name) {
      return name + '!';
    },
  },
}
</script>

• TypeScriptで記述した場合

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      name: '',
      locations: [] as string[],
    };
  },

  methods: {
    test(name: string): number {
      this.locations.push(name);
      return this.locations.length;
    },
  },
});
</script>