popolo - code simple..

popolo - code simple..

Masonite Project - Install Vue3

Masonite Project - Install Vue3

Theodoros Kafantaris's photo
Theodoros Kafantaris
·May 1, 2022·

3 min read

Table of contents

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/

image.png

It works!

 
Share this