TheLazy.Dev
Portfolio GitHub

Blog

laravel |vue |tailwindcss |crud

Set up VueJS, Tailwind & Laravel - VuTaL Stack for Development

scriptmint

ScriptMint

Posted on February 2, 2022

Set up VueJS, Tailwind & Laravel - VuTaL Stack for Development

Note: You should have basic knowledge of Laravel, NPM commands before you setup this VuTaL Stack.

VuTaL is one of the most common dev stack you will notice in Laravel Community. I personally choose VuTaL Stack when I need to build Single Page Web Application (No page refresh) with REST API Feature. The REST API also helps to further integrate the application with any other services or to build a Mobile Application.

If you are looking for an example app built with VuTaL Stack, you can check here.

Github Repo: https://github.com/scriptmint-solution/vutal-stack-setup

Here are the steps I prefer to setup VuTal Stack.

Setup Laravel 8

You must have Composer v2 installed on your system.

If you wish to install Laravel with Composer, you can run:

composer create-project laravel/laravel vutal
cd vutal
Enter fullscreen mode Exit fullscreen mode

Or

If you have installed Laravel Installer globally as composer dependency, you can run:

laravel new vutal
cd vutal
Enter fullscreen mode Exit fullscreen mode

Install VueJS 3

You must have nodejs installed on your system. As per my dev environment, I am using Node v16.x & NPM v7.x for the development.

To install VueJS 3, you can run:

npm install vue@next
Enter fullscreen mode Exit fullscreen mode

As of now, default VueJS version is 2.x. Version 3.x will become default on 7th Feb 2022 as per Vue Creator Evan You.

You also need to install additional dependencies by running below command:

npm install resolve-url-loader sass sass-loader vue-loader --save-dev
Enter fullscreen mode Exit fullscreen mode

Next, go to resources/js/app.js file and register your application instance.

import { createApp } from "vue"

const app = createApp({});

app.mount("#root");
Enter fullscreen mode Exit fullscreen mode

Now, we will create our first Vue Component. Create a HelloWorld.vue file under resources/js/components folder as below:

<template>
    Hello World!
</template>
Enter fullscreen mode Exit fullscreen mode

To register this HelloWorld component, add it in the resources/js/app.js file as below:

import { createApp } from "vue"
import HelloWorld from './components/HelloWorld.vue';

const app = createApp({});
app.component('hello-world', HelloWorld);

app.mount("#root");
Enter fullscreen mode Exit fullscreen mode

Now, let's change resources/views/welcome.blade.php default content to load this Vue instance.

<!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">
        <title>Hello World</title>
    </head>
    <body>
        <div id="root">
            <hello-world></hello-world>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Vue application needs to be mounted into a DOM element. For example, to mount a Vue application, we should pass the id "root". Also note that the is the custom component we registered with this Vue instance.

At this point, when you visit your application in the browser, you will get an empty page.

Add Tailwind CSS 3

To install Tailwind CSS 3, you can run:

npm install -D tailwindcss
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

This will create tailwind.config.js file which you can use to configure your tailwind setup. The default content of tailwind.config.js is as below:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Next, create an app.scss file under resources/sass folder and put following content:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

In the final step, we will need to compile these assets. Laravel by default offers webpack.mix.js file to compile assets. Let's modify this file.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });
Enter fullscreen mode Exit fullscreen mode

You need to run npm command to compile assets.

npm run dev
Enter fullscreen mode Exit fullscreen mode

The assets are generated under public folder as shown in the image below:

image.png

You can link these assets to your welcome.blade.php file as below.

<!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">
        <title>Hello World</title>
        <link href="/css/app.css" rel="stylesheet">
    </head>
    <body>
        <div id="root">
            <hello-world></hello-world>
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You are almost done. You can now visit the application in your browser and you should see "Hello World!" content without any styling.

Let's add some Tailwind styling to your HelloWorld.vue component:

<template>
    <div class="h-screen w-full flex justify-center items-center bg-gray-800">
        <span class="text-gray-400">Hello World!</span>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Again build your assets, using npm run dev command and refresh your browser. Nothing happened! Yes.

Tailwind generates css hundreds of classes and that will become huge in size. Therefore, by default Tailwind removes (purges) all the unused classes.

Remember in our tailwind.config.js file, we have content section as empty array. Let's modify this to search for all the .vue files and remove all other unused classes.

module.exports = {
  content: [
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Now build your assets, using npm run dev command and refresh your browser.

Hurray! You have setup your first VuTaL Stack. Happy development!

💖 💪 🙅 🚩
scriptmint
ScriptMint

Posted on February 2, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Set up VueJS, Tailwind & Laravel - VuTaL Stack for Development
laravel Set up VueJS, Tailwind & Laravel - VuTaL Stack for Development

February 2, 2022