概要

Laravel-MixがVue.js3に対応したので、コンパイル通すまでやってみる。
環境はLaravel6.xのデフォルトとする。

環境

macOS Mojave
Node.js v14.4.0
Laravel6.x
Laravel-Mix 5.0.1
Vue.js 3.0.0-rc.5
TypeScript 3.9.7

laravel-mix-vue3のインストール

laravel-mix-vue3の手順通りにインストール。

$ npm install laravel-mix-vue3 vue-loader@next -D
 
or
 
$ yarn add laravel-mix-vue3 vue-loader@next -D

@vue/compiler-sfcのインストール

ここ手順書にないのだが、これがないと怒られる・・・

$ npm i @vue/compiler-sfc -D

or 

$ yarn add @vue/compiler-sfc -D

cross-envのインストール

デフォルトだとcross-envがないって怒られるので、インストール

$ npm i cross-env -D

or 

$ yarn add cross-env -D

resources/js/app.jsを編集

Vue.js2とは書き方が違うので注意

import { createApp } from 'vue';
import App from './App.vue'

createApp(App).mount('#app')

App.vueの作成

一旦文字を出すだけに。

App.vue

<template>
  <div>
      Hello
  </div>
</template>

webpack.mix.jsを編集

webpack.mix.js

const mix = require('laravel-mix');
require("laravel-mix-vue3");
mix.vue3('resources/js/app.js', 'public/js')

コンパイルする

$ npm run dev

> @ dev /Users/Desktop/php-projects/hoge
> npm run development


> @ development /Users/Desktop/php-projects/hoge
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install @ant-design-vue/babel-plugin-jsx vue@next --save-dev --production=false
 
        Okay, done. The following packages have been installed and saved to your package.json dependencies list:
 
        - @ant-design-vue/babel-plugin-jsx
 
        - vue@next
 
98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 2462ms                                                                                                                15:24:09

     Asset     Size   Chunks             Chunk Names
/js/app.js  411 KiB  /js/app  [emitted]  /js/app
miyamotomasatonoMacBook-puro:modelphoto masato$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
[Sun Aug  2 15:25:30 2020] 127.0.0.1:56171 [200]: /js/app.js
[Sun Aug  2 15:25:31 2020] 127.0.0.1:56180 [200]: /favicon.ico

色々モジュールが入って、成功する。

tsconfig.json も自動生成される！

app.jsの読み込み

resources/views/index.blade.phpを作成し、編集する

resources/views/index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>

ルーティング設定

routes/web.php

Route::get("/", function () {
    return view("index");
});

画面にアクセス

Dockerでもビルトインサーバーでもいいので、サーバー立ち上げ
(今回はビルトインサーバー使います)

$ php artisan serve

http://127.0.0.1:8000/にアクセス。

見れます。

試しにTypeScriptまで行ってみる

App.vueの編集

resources/js/App.vue

<template>
  <div>{{ hello }}</div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  setup() {
      const hello = ref(
          "Hello From TypeScript"
      )

      return {
          hello
      }
  },
};
</script>

resources/js/app.jsをresources/js/app.tsにrename

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

必要なモジュールを入れる

$ npm i @types/webpack-env typescript ts-loader -D

or

$ yarn add @types/webpack-env typescript ts-loader -D

webpack.mix.jsの編集