🖥

Laravel9 +vite で Vue を導入する ( create project からの手順 )

2023/09/01に公開

ネットで調べた方法だと惜しいところまで行って動かなかったのでメモ

Create project

プロジェクトを作成する

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue-axample
cd laravel9-vue-axample

npm install

npm install
npm install vue@next vue-loader@next
npm i @vitejs/plugin-vue --save-dev

Edit vite.config.js

plugin に vue を追加する

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Edit resouces/js/app.js

vue を読み込む

import './bootstrap';
import '../css/app.css';
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")

Create resources/js/App.vue

Vueファイルを作る
ここでは動作確認用にカウンタ処理を書いておく

<template>
  <div class="page">
    <p>{{ counter }}</p>
    <button @click="counter += 1">
      click!
    </button>
  </div>
 </template>

 <script>
 export default {
  data () {
    return {
      counter: 0,
    }
  },
 }
 </script>

Edit resources/views/welcome.blade.php

ウェルカムページをVue用に編集する

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
       <title>Hello</title>
      @vite('resources/css/app.css')
    </head>
    <body>
      <div id="app"></div>
      @vite('resources/js/app.js')
    </body>
</html>

Serve

コンソールので別タブでそれぞれ vite / laravel を起動する

npm run dev

php artisan serve

Access on browser

http://127.0.0.1:8000/ にアクセスする

画面例

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter

https://twitter.com/YumaInaura

公開日時

2022-12-17