In this series, we will install Vue3 in our Masonite Project. The good thing is that Masonite is using Laravel Mix as a bundler for our JS and assets for the browser. We don't need to be an expert in either Laravel Mix or NPM to compile assets, though.
Masonite Installation
mkdir masonite-vue
cd masonite-vue
Activating Our Virtual Environment
python -m venv venv
source venv/bin/activate
Install Masonite
pip install masonite
Start project
project start .
Start Development Server
python craft serve
This is it! We have the new Masonite Project running now!
Install Vue & Dependencies
We'll install Vue 3 and our dev dependencies:
npm install --save vue && npm install --save-dev vue-loader
Prepare Mix for Vue
Let's go to our webpack.mix.js file and add a .vue() method chain. Our mix file should now look something like this:
/* Mix provides a clean, fluent API for defining some Webpack build steps for your Masonite
applications. By default, we are compiling the CSS file for the application as well as
bundling up all the JS files. */
const mix = require('laravel-mix')
const path = require('path')
mix.js('resources/js/app.js', 'storage/compiled/js')
.postCss('resources/css/app.css', 'storage/compiled/css', [
//
]).vue()
// ensure root directory of mix is project root
mix.setPublicPath(".")
// add an alias to js code
mix.alias({
"@": path.resolve("resources/js/"),
})
// add version hash in production
if (mix.inProduction()) {
mix.version()
}
// Disable compilation success notification
mix.disableSuccessNotifications()
Create our Vue 3 component
Next, let's go ahead and create our Vue 3 component. In the spirit of adventure, let's use the new composition API. Create a file /resources/js/components/Welcome.vue as so:
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
setup: () => ({
title: 'How To Install Vue 3 in Masonite Project From Scratch'
})
}
</script>
Import Vue to the Masonite javascript file
First, we are not going to import Vue, we are going to import a named export from Vue 3 called createApp.
import { createApp } from 'vue'
Let's import our Welcome component and create the Vue app.
import Welcome from './components/Welcome';
const app = createApp({});
Finally, our app.js the file will look something like this:
require("./bootstrap.js")
import { createApp } from 'vue'
import Welcome from './components/Welcome'
const app = createApp({})
app.component('hello-world', Welcome)
app.mount('#app')
Prepare Base Template for Vue
Now let us create an element that has that id. To do this, we can remove the standard markup found in our base.html file and replace it with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="csrf-token" content="{{ csrf_token }}">
<title>{% block title %}Masonite 4{% endblock %}</title>
<link rel="shortcut icon" href="/favicon.ico">
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
{% block head %}
<!-- <link rel="stylesheet" href="/assets/css/app.css"> -->
{% endblock %}
</head>
<body>
<div id="app">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
<hello-world/>
</div>
</div>
{% block js %}
<script src="/assets/js/app.js"></script>
{% endblock %}
</body>
</html>
Now let's open the follow url:
http://127.0.0.1:8000/
It works!