28
29

More than 3 years have passed since last update.

Laravel-MixがVue.js3に対応した(TypeScript導入まで)

Last updated at Posted at 2020-08-02

概要

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/にアクセス。

Image from Gyazo

見れます。

試しに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の編集

webpack.mix.js
const mix = require('laravel-mix');
require("laravel-mix-vue3");
mix.vue3('resources/js/app.ts', 'public/js'); //app.tsに編集

コンパイル

$ 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

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 3311ms                                                                                                                22:26:23

     Asset     Size   Chunks             Chunk Names
/js/app.js  414 KiB  /js/app  [emitted]  /js/app

コンパイルが通る・・・エディタ上ではエラーが出るけど一旦スルー

画面確認

$ php artisan serve

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

Image from Gyazo

見れたー。

参考

laravel-mix-vue3

28
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
29