Zenn
🐶

Laravel8.xとVue.js3でToDoアプリを作成 2 ~Vue.js導入~

2022/01/16に公開
Docker
Laravel
PHP
TypeScript
Vue.js
tech

はじめに

Laravel8.xとVue.js3を使用してToDoアプリを作成の第二弾です！

Laravelの環境構築はこちらです。
https://zenn.dev/tasuya/articles/7d7c90f6ba2f1e

今回はVue.jsを導入をしていきたいと思います。
Vue.js3をインストールしてTypeScriptを使用できるようにする所までが今回のゴールです。

構築

LaravelのView部分をVue.jsに置き換えて作成をしていきます。

フロントエンド

Vue.js3
TypeScript

バックエンド

PHP7.4.1
Laravel8.x

データベース

MYSQL8.0

インフラ

Docker
docker-compose
Nginx

Vue.js導入

各種インストール

Laravel8.xではlaravel-mix6がデフォルトでインストールされているため、Vue.js3とTypeScriptのインストールを行います。

まずは下記コマンドを上から順番に実行します。

docker-compose run app npm install vue@next -D
docker-compose run app npm install vue-loader@next -D
docker-compose run app npm install @vue/compiler-sfc -D
docker-compose run app npm install @types/webpack-env typescript ts-loader -D

Vue.js設定

必要なライブラリ等はインストールできたので、設定をしていきます。

まずwebpack.mix.jsの設定をしていきます。

src/webpack.mix.js
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js')
    .css('resources/css/app.css', 'public/css').vue();
});

app.jsをapp.tsに変更します！

cd src/resources/js
mv app.js app.ts

tsconfig.jsonファイルを作成します。

cd src
touch tsconfig.json

作成されたtsconfig.jsonファイルを書き換えます。

src/tsconfig.json
{
  "compilerOptions": {
      "outDir": "./built/",
      "sourceMap": true,
      "strict": true,
      "noImplicitReturns": true,
      "noImplicitAny": true,
      "module": "es2015",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "moduleResolution": "node",
      "target": "es6",
      "lib": [
          "es2016",
          "dom"
      ]
  },
  "include": [
	  "resources/js/**/*" 
  ]
}

次にresources/jsディレクトリ内に@typesディレクトリを作成します。

cd src/resources/js
mkdir @types

@typesディレクトリ内にshims-vue.d.tsファイルを作成します。

cd @types
touch shims-vue.d.ts

shims-vue.d.ts編集します。

src/resources/js/@types/shims-vue.d.ts
declare module "*.vue" {
    import {defineComponent} from "vue";
    const component: ReturnType<typeof defineComponent>;
    export default component;
}

設定自体は以上となります！！

Vue.js確認

ここからはVue.jsが設定できているのか画面に表示して確認したいと思います。

まず先程名前を変更したapp.tsを編集します。

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

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

import App from './App.vue';の所でエラーが出ているかと思いますが、
後で解消させるため、一旦無視して置きます。

次にApp.Vueを作成します。

touch App.Vue

編集していきます。

src/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>

次にindex.blade.phpを作成して編集します。

cd src/resources/views
touch index.blade.php
src/resorces/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>

次にindex.blade.phpをルートパスにします。
web.phpを書き換えます。

src/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
    return view('index');
});

ここまでできたらビルドをします。

docker-compose run app npm run dev

下記のような表示がでればapp.jsとapp.cssが作成されています。

最後に画面の確認です。
下記コマンドを入力後、http://localhost:80にアクセスしてHello From TypeScriptがでたら成功です！！

docker-compose up -d

次回

次回はDBの作成とVue.jsへデータを送る所まで行いたいと思います！！
ここまでみていただきありがとうございました！！

Discussion