【ララはじ #2】 Laravel9でVueも始めました。
ちょっと、Web系の開発から離れていたので、今時どんな感じになってるのかを確認する為にいろいろやってみた備忘録です。
ちょっと叫んでもいいですか？
MixとかWebpackどこいったの？！
ちょっと目を離した隙に、Viteとか言うのに変わったみたいです…orz
調べて見ると、こっちの方が速いんだとか
『虎穴に入らずんば虎児を得ず』と言いますか、『郷に入っては郷に従え』と言いますか、まぁ、慣れるしかないですよね。
最終的にはフロントエンドはVue、バックエンドはLaravelで構成したいので、
というか、Vue3なんですか！？
2から何が変わったんですか！？
という事件は置いておいて、まずは、Vueをインストールします。
% sail npm install @vitejs/plugin-vue --save-dev次にスタートページである resources/views/welcome.blade.php を大改造します。
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel9、はじめました。</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>そして、トップページとして resources/js/components/App.vue を新規作成します。
<template>
<h1>Ｌａｒａｖｅｌ９、さわり始めました。</h1>
</template>最後に、今作成したApp.vueを表示するように、 resources/js/app.js を修正というか、追記します。
import './bootstrap';
import { createApp } from "vue";
import App from "./components/App.vue"
const app = createApp(App);
app.mount("#app");あ、忘れてたｗ これが最後です。ViteにVueの設定を vite.config.js に追記します。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // <-- ここ
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
// ↓ ここから
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
// ↑ ここまで
],
});ここは変わってない…
HMR用のサーバーを起動して、http://localhost にアクセスしてみたら
ちゃんと始めてるみたいだったので、安心した。
sail npm run devHMR使わない場合は
sail npm run buildという感じ。
あれ？
簡単になった？
前はもう少しゴニョゴニョしてたような、してなかったような…それは遠い昔の話。