Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
28
Help us understand the problem. What is going on with this article?
@ProjectEuropa

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

概要

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
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ProjectEuropa
PHPとかJavaScriptとか
canly
「店舗に関わる全ての人に、最も信頼されるインフラを創る」 をミッションにGoogleマイビジネスを始めとした複数SNS一括管理SaaS「Canly(カンリー)」というサービスを提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
28
Help us understand the problem. What is going on with this article?