DEV Community: Nolan Nordlund

Creating a project template using Laravel, Vue 3, and Tailwind - Part 3

Nolan Nordlund — Mon, 12 Apr 2021 13:43:11 +0000

This article was originally published at projectrebel.io.

Creating a project template using Laravel, Vue 3, and Tailwind

Part 1
Part 2
Part 3 <- you are here
Part 4

In this installment of the project template series, we're going to add a single page application to our Laravue3 Breeze template that we created last time. We'll be using Laravel's Sanctum package. Sanctum provides an extremely easy way for a hosted SPA to make API requests for data from our Laravel backend. If you want to jump right into a project now, you can download it from Github.

Instead of authenticating directly through the single page application, I prefer to use the basic authentication provided by Laravel to gain access to a view that serves your SPA. In my opinion, this is a simpler way to get started. Once the user is authenticated, Sanctum will provide the authentication for individual API requests.

Installing Sanctum

Like most of Laravel's first-party packages, installation is quite simple. We'll install via composer, publish the assets, and run the necessary migrations.

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Next, we'll add Sanctum's middleware to our api middleware group.

// app/Http/Kernel.php
'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

By default, Laravel includes a simple route in routes/api.php which simply returns the User model of the authenticated user. All we need to do to allow our SPA to access this route is to update the middleware it specifies.

// routes/api.php
...
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Consuming the API

Now that we have a functioning endpoint, let's make a call from a new component and display the output. We'll use the composition API for this component.

// resources/js/components/Dashboard.vue
<template>
    <h1 class="text-2xl font-bold mb-2">Dashboard</h1>
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 bg-white border-b border-gray-200">
            {{ user }}
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup(props, {}) {
    const user = ref({});

    function getUser() {
        axios.get('/api/user/')
            .then(response => user.value = response.data)
            .catch(error => user.value = error);
    }

    onMounted(() => {
        getUser();
    });

    return {
        user
    }
  },
};
</script>

Before we register and mount the component, let's review it quickly. We are making use of Vue's mounted lifecycle hook to run a function that uses axios (which is bound to the window within resources/js/bootstrap.js) to fetch the user data via a get request. The result will be displayed whether the call is successful or not. Let's get it hooked up to a Laravel view.

// resources/views/dashboard.blade.php
...
    <div id="app" class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <dashboard />
        </div>
    </div>
...

// resources/js/app.js
require("./bootstrap");
require('alpinejs');

import { createApp } from "vue";
import Home from "./components/Home.vue";
import Dashboard from "./components/Dashboard.vue";

const app = createApp({
  components: {
    Home,
    Dashboard
  }
});

app.mount("#app");

Register a new user at /register and then you will be redirected to the dashboard view where our new component will spit out your user data.

That's it! We've got a consumable API and a workflow to build new features. At this point, you are ready to run wild but it wouldn't be quite right to leave with a view that is a mix of Blade templates and Vue components. Let's create a nice starting point for SaaS friendly frontend.

If you are running into issues with 401 errors, you might be making the request from a domain that isn't included in Sanctum's `stateful` configuration. Since I like to use BrowserSync and tend to jump between different projects, sometimes I end up running my frontend from `localhost:3002` which is not included by default.

Building the app

Let's move to the frontend and put together a simple framework so we can really say that we have a SPA. The basic plan will be to create the shell of a typical admin dashboard and install Vue Router so we are able to navigate between newly added components.

Let's start by adding a new blade file that will display our app shell and nothing more. Then we'll update our routes to serve the view from a dedicated controller.

// resources/views/app.blade.php
<!DOCTYPE html>
<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>{{ config('app.name', 'Laravel') }}</title>

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div id="app">
            <app :user="{{ $user }}" />
        </div>
    </body>
</html>

// routes/web.php
...
use App\Http\Controllers\AppController;
...
Route::get('/app', [AppController::class, 'index'])->name('app');
Route::get('/app/{vue_capture?}', [AppController::class, 'app'])->where('vue_capture', '[\/\w\.\-\ \&\=]*');
...

// app/Http/Controllers/AppController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AppController extends Controller
{
    public function index()
    {
        return redirect('app/dashboard');
    }

    public function app()
    {
        return view('app', [
            'user' => auth()->user()
        ]);
    }
}

The second of those 2 routes is a little different than what you would typically see. We are simply using regex to find any route that should be handled by Vue and then routing it to the blade view that serves our app.

Since we are going to use /app to serve our SPA, we'll want to update the route we are redirected to upon logging in. Let's also update the route used in welcome.blade.php when users are logged in.

// app/Providers/RouteServiceProvider.php
...
public const HOME = '/app';
...

// resources/views/welcome.blade.php
...
@auth
    <a href="{{ url('/app') }}" class="text-sm text-gray-700 underline">Dashboard</a>
@else
    <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>

    @if (Route::has('register'))
        <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
    @endif
@endauth
...

Next, we'll install Vue Router 4 which supports Vue 3. Not the best versioning but hey, what can you do? We'll add a routes.js file, create the router in app.js and add it to our Vue instance.

npm install vue-router@4

// resources/js/app.js
...
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes.js';

const router = createRouter({
  history: createWebHistory(),
  routes: routes.routes,
});
...
app.use(router);
app.mount("#app");

// resources/js/routes.js
import Dashboard from './components/Dashboard.vue';
import AnotherComponent from './components/AnotherComponent.vue';

export default {
    routes: [
        {
            path: '/app/dashboard',
            component: Dashboard,
            name: 'dashboard',
            meta: {
                title: 'Dashboard'
            },
        },
        {
            path: '/app/another-component',
            component: AnotherComponent,
            name: 'another-component',
            meta: {
                title: 'Another Component'
            },
        },
    ],
};

We are adding a placeholder component in our routes.js file just so we can see that Vue Router is working by moving between Dashboard and AnotherComponent.

// resources/js/components/AnotherComponent.vue
<template>
  <h1 class="text-2xl font-bold">Another Component</h1>
</template>

<script>
export default {};
</script>

Now we just need the app layout to put it all together. There is a lot happening in the layout and we'll make a lot of changes in the next post so feel free to copy it for now.

// resources/js/components/App.vue
<template>
<div class="h-screen flex overflow-hidden bg-gray-50">
  <div v-show="showMenu" class="md:hidden">
    <div class="fixed inset-0 flex z-40">
      <div class="fixed inset-0">
        <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
      </div>
        <div v-show="showMenu" class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
          <div class="absolute top-0 right-0 -mr-12 pt-2">
            <button @click="showMenu = false" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none">
              <span class="sr-only">Close sidebar</span>
              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
            <div class="flex-shrink-0 flex items-center px-4">
              <img class="h-8 w-auto" src="/images/laravue3-logo.png" alt="logo">
            </div>
            <nav class="mt-5 px-2 space-y-1">
              <router-link
                v-for="(route, index) in $router.options.routes"
                :key="index"
                :to="{ name: route.name }"
                exact
                @click="showMenu = false"
                class="hover:bg-gray-50 text-gray-600 hover:text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md"
                >
                {{ route.meta.title }}
              </router-link>
            </nav>
          </div>
          <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
            <a href="#" class="flex-shrink-0 group block">
              <div class="flex items-center">
                <div>
                  <img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=DS9XwDWeLa&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                </div>
                <div class="ml-3">
                  <p class="text-base font-medium text-gray-700 group-hover:text-gray-900">
                    {{ user.name }}
                  </p>
                  <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">
                    View profile
                  </p>
                </div>
              </div>
            </a>
          </div>
        </div>
      <div class="flex-shrink-0 w-14"></div>
    </div>
  </div>

  <div class="hidden md:flex md:flex-shrink-0">
    <div class="flex flex-col w-64">
      <div class="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
        <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
          <div class="flex items-center flex-shrink-0 px-4">
            <img class="h-8 w-auto" src="/images/laravue3-logo.png" alt="logo">
          </div>
          <nav class="mt-5 flex-1 px-2 bg-white space-y-1">
            <router-link
              v-for="(route, index) in $router.options.routes"
              :key="index"
              :to="{ name: route.name }"
              exact
              class="hover:bg-gray-50 text-gray-600 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
              >
              {{ route.meta.title }}
            </router-link>
          </nav>
        </div>
        <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
          <a href="#" class="flex-shrink-0 w-full group block">
            <div class="flex items-center">
              <div>
                <img class="inline-block h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=DS9XwDWeLa&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
              </div>
              <div class="ml-3">
                <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
                  {{ user.name }}
                </p>
                <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
                  View profile
                </p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col w-0 flex-1 overflow-hidden">
    <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
      <button @click="showMenu = true" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
        <span class="sr-only">Open sidebar</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
    <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0">
      <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">

          <router-view></router-view>

        </div>
      </div>
    </main>
  </div>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    user: {
      type: Object,
      required: true,
    }
  },

  setup(props, {}) {
    const showMenu = ref(false);

    return {
      showMenu,
      user: props.user
    }
  }
}
</script>

Now register App.vue with our root Vue instance and we are golden.

// resources/js/app.js
...
import App from "./components/App .vue";
...
const app = createApp({
  components: {
    App,
    Home,
    Dashboard
  }
});
...

Conclusion and next steps

We've got a functional SPA! We should be in a great position to build out the backend and do some basic frontend work to show the results. I'll do one more post to flesh out the front end. We'll set up the frontend so it can be rapidly prototyped just like the backend. In the meantime, let me know how it's going! Leave a comment and tell me what you'd like to see next.

Creating a project template using Laravel, Vue 3, and Tailwind - Part 2

Nolan Nordlund — Wed, 24 Mar 2021 16:28:29 +0000

This article was originally published at projectrebel.io.

Creating a project template using Laravel, Vue 3, and Tailwind

Part 1
Part 2 <- you are here
Part 3
Part 4

Today we are going to take our simple project template and bring it to the next level by adding Laravel Breeze for simple authentication and set up our TDD workflow using PHPUnit and Jest. If you missed the last post, I'd suggest checking it out. It'll only take a few minutes for you to catch up but if you can also download the source code on Github.

Installing Breeze

Just as it was when installing the Laravel framework, adding Breeze is incredibly simple. Just a few commands will add everything that we need.

composer require laravel/breeze --dev
php artisan breeze:install
npm install
npm run dev

The breeze:install command will add a ton of files to your project structure. In the resources folder, you'll see several views added that are specific to authentication. These are things like login, register, or password reset views. You'll have a new components folder also. These are Laravel Components which are blade templates but with some additional horsepower that work together to make them more programmatic in nature. We won't go into detail on them here so if you want to learn more, take a look at the docs. We have a layouts folder for our navigation as well as layouts for guests and authenticated users. Finally, dashboard.blade.php will be added to the root level of our views folder. This is the view that is returned when a user successfully login into the application. There are corresponding classes in app\View\Components.

Several controllers have been added to app\Http\Controllers\Auth as well as a LoginRequest in app\Http\Requests\Auth. We have new routes added via routes/auth.php and in routes/web.php. Our RouteServiceProvider has also been updated to redirect users to /dashboard once they authenticate. There are also tests for our authentication process but we'll get to those in a minute. Before we get to testing, we'll need to visit some files that Breeze overwrites and merge the new changes with our previous versions of the files.

In our package.json, you'll see that some of the versions of packages that we already had installed might have changed. These aren't too important so I'll leave it up to you if you want to revert to our previous versions or not. What is important is that a few new packages have been added. @tailwindcss/forms, alpinejs, and postcss-import are all needed by the Breeze starter kit. Making use of these new packages requires changes to app.js, webpack.mix.js, and tailwind.config.js.

// resources/js/app.js
require("./bootstrap");
require('alpinejs');

import { createApp, h } from "vue";
...

// webpack.mix.js
...
mix.js('resources/js/app.js', 'public/js').vue();
mix.postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: ['./storage/framework/views/*.php', './resources/views/**/*.blade.php'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },
    plugins: [require('@tailwindcss/forms')],
};

The changes to the first two files are pretty simple. We are just adding alpinejs to our main javascript file and including postcss-import and autoprefixer in our CSS build process. The tailwind.config.js changes are a little bigger although the only one that is truly necessary is adding the official tailwind forms plugin to our configuration. The last change to mention is in resources/css/app.css. Breeze updates this file to use an alternate syntax for including the tailwind base styles. I like the brevity of the @tailwind syntax, but either option works.

Let's add links for the login and register pages to our welcome view.

// resources/views/welcome.blade.php
...
<body>
    @if (Route::has('login'))
    <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
        @auth
        <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 underline">Dashboard</a>
        @else
        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>

        @if (Route::has('register'))
        <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
        @endif
        @endauth
    </div>
    @endif

    <div id="app" class="flex items-center bg-gray-100 min-h-screen">
        <home />
    </div>
...

You should see the links in the top right of our welcome view. We'll want to register a new user but first, we need to create a database for our application. Once it is set up, run php artisan migrate and then we can register our user. After registering you should be redirected to the dashboard which was created by Breeze. Our authentication system is in place!

Configuring PHPUnit

Laravel has some great tools which extend the functionality of PHPUnit making TDD an excellent fit for any Laravel project. We'll just make a couple of extra config changes before we move onto the javascript portion of our testing setup. In our phpunit.xml file, let's uncomment the 2 entries within the PHP section so our tests will use sqlite in memory when testing.

// phpunit.xml
...
    <php>
        <server name="APP_ENV" value="testing"/>
        <server name="BCRYPT_ROUNDS" value="4"/>
        <server name="CACHE_DRIVER" value="array"/>
        <server name="DB_CONNECTION" value="sqlite"/>
        <server name="DB_DATABASE" value=":memory:"/>
        <server name="MAIL_MAILER" value="array"/>
        <server name="QUEUE_CONNECTION" value="sync"/>
        <server name="SESSION_DRIVER" value="array"/>
        <server name="TELESCOPE_ENABLED" value="false"/>
    </php>
...

You will be able to run the tests using vendor/bin/phpunit but Laravel has an awesome feature called parallel testing which greatly decreases the testing time of large test suites by running tests on multiple cores. There might not be a significant improvement at this point but we'll add it regardless. Running php artisan test --parallel will prompt you to install brianium/paratest. Once it is installed, the same command will run the test suite for us.

php artisan test --parallel

Javascript testing via Jest

The last goal we want to accomplish in this version of our project template is having automated testing capabilities for our frontend. There are lots of ways to do this in the javascript ecosystem. We will use Jest as our main testing tool and Vue Test Utils to allow testing of our Vue single file components (SFCs).

We can add all the packages we need in one go by running the following command.

npm install --save-dev jest vue-jest@~5.0.0-alpha babel-jest @babel/core @babel/preset-env @vue/test-utils@next

We need some extra configuration for Jest and Babel to get these packages working together to provide us a usable testing environment. You can either add new config files specific to each package in your root directory (jest.config.js and babel.config.js) or just add the relevant sections to package.json.

// package.json
...
"jest": {
        "testRegex": "tests/components/.*.test.js$",
        "moduleFileExtensions": [
            "js",
            "vue"
        ],
        "moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/resources/js/$1"
        },
        "transform": {
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
            ".*\\.vue$": "<rootDir>/node_modules/vue-jest"
        }
    },
    "babel": {
        "presets": [
            [
                "@babel/preset-env",
                {
                    "targets": {
                        "node": "current"
                    }
                }
            ]
        ]
    }

At the very beginning of our Jest configuration, we have an entry for testRegex. This is the pattern that Jest will use to find our test files. I am going to add a new folder called components inside of the tests folder. Now Jest should find any files in this folder that end with test.js. Another common standard to use is spec.js. Let's add a simple test for our Home component.

// tests/components/Home.test.js
import Home from '../../resources/js/components/Home.vue';
import { mount } from '@vue/test-utils'

test('displays message', () => {
  const wrapper = mount(Home);

  expect(wrapper.text()).toContain('Home component')
});

The last step is to add scripts to run Jest against our test suite.

// package.json
...
"scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "test": "jest",
        "testing": "jest --watch"
    },
...

Let's see it in action.

npm run test

Conclusion and next steps

While the basic version of our project template is helpful to simplify the start-up process of the most basic experiments, this version with authentication and a working test driven development workflow is much more practical for a real project. Therefore, we are saving much more time getting up and running with a template like this one. You can find the working template on Github once again. Next time we are going to set up a single page application template for projects that need more interactivity with the user.

Creating a project template using Laravel, Vue 3, and Tailwind - Part 1

Nolan Nordlund — Mon, 15 Mar 2021 21:25:17 +0000

This article was originally published at projectrebel.io.

Creating a project template using Laravel, Vue 3, and Tailwind

Part 1 <- you are here
Part 2
Part 3
Part 4

Laravel has recently added a couple of cool new tech stacks to the ecosystem, Livewire and Inertia. Both have a lot of potential and can be great next steps for people looking to get some more interactivity in their Laravel projects but who may feel that a full-fledged JS framework is daunting. About a year before Laravel introduced the new stacks, I decided to take the plunge on Vue. Even with great options like Livewire and Inertia, I would highly recommend a Vue deep dive.

Since learning Vue, I have found myself doing lots of tinkering on fun weekend ideas. Often a new idea means a fresh install and rather than spending all of my tinkering time installing packages and setting up build processes, I decided my next tinkering project would be a series of Laravel + Vue 3 templates. For the most basic of ideas, all I really want is Laravel with Vue integrated. Often times I'm using a project like this to test a new technique or package rather than actually work on an app idea. If I want to rapidly prototype a simple app and I'm not too concerned about the UX of the project, I'll add a simple authentication system and testing tools. And finally, for the projects that I think might actually turn into something useful, I like to set up a SPA.

I'll show you how I put each of my project templates together and you'll find links to the Github repos if you would rather just download it and get started with one of your own creations.

Setting up a basic project template

The goal here is to have something that I can clone and immediately have access to some of the basic tools that I want in all of my projects. Again, the uses for this basic template are just experimenting with new techniques or packages so my needs are pretty low.

Installing Laravel

Let's start with a fresh install of Laravel. If you have the installer, it is incredibly simple.

laravel new template

If you don't have the Laravel installer, check out the docs to get started.

Integrating Vue 3

While Vue 3 was officially released back in September of 2020, it still needs to be installed using the next tag.

npm install vue@next

Now that we have added Vue to our project, we'll create an instance and mount it to one of our blade templates.

// resources/js/app.js
require("./bootstrap");

import { createApp } from "vue";

const app = createApp({});

app.mount("#app");

// resources/views/welcome.blade.php
...
<body>
    <div id="app" class="flex items-center bg-gray-100 min-h-screen">

    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
...

We'll need to also update our JS build process to correctly process our Vue 3 files. I prefer using BrowserSync when I'm developing and Laravel Mix makes it simple to add. We'll make use of the APP_URL setting in the .env file.

// webpack.mix.js
const mix = require('laravel-mix');

mix.browserSync({
    proxy: process.env.APP_URL,
    notify: false
});
mix.js('resources/js/app.js', 'public/js').vue();
mix.postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Run the build and we'll have a functioning Vue instance but we won't see anything just yet. Mix will likely also install some extra packages and need to run a second time.

npm install && npm run dev

Next we'll add a simple component so we have something to display. Create a new folder for components in resources/js and then we'll create our simple component, Home.vue.

// resources/js/components/Home.vue
<template>
    <div>
        <h1>
            Basic template
        </h1>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, expedita? Officiis autem, omnis hic similique facere tempora culpa animi quisquam commodi illum sapiente error fugiat? Nobis, architecto? Sapiente, laborum sint!    
        </p>
    </div>
</template>

<script>
export default {};
</script>

// resources/js/app.js
require("./bootstrap");

import { createApp } from "vue";
import Home from "./components/Home.vue";

const app = createApp({
  components: {
    Home
  }
});

app.mount("#app");

// resources/views/welcome.blade.php
...
<body>
    <div id="app" class="flex items-center bg-gray-100 min-h-screen">
        <home />
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
...

Adding TailwindCSS for styling

For the fastest prototyping, TailwindCSS is an excellent choice to style our views. It is a utility framework that might feel wrong if you strive to minimize the number of classes you use in your HTML. If you try it, I'm sure you'll love it. It is what I used to build my site as well as several others. As a developer with mostly backend experience, Tailwind really helped to demystify all things CSS.

One of Tailwind's most powerful features is the advanced configuration and theme customization. We can install and get a basic setup with the following commands.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwind init

You'll have a tailwind.config.js file in the root of your project for you to customize tailwind to your heart's content. One more update for webpack and we'll add the Tailwind styling to our app.css file.

// webpack.mix.js
...
mix.postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

// resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

The welcome view comes with some styles defined directly inside of style tags within the head of the view. Remove the styles and replace them with a link to our app.css file.

// resources/views/welcome.blade.php
...
<head>
    ...
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    ...
</head>
...

Finally, let's make some updates to the styling of our Home component.

// resources/js/components/Home.vue
<template>
    <div class="w-1/2 bg-white rounded-lg shadow-lg mx-auto p-4">
        <h1 class="text-2xl text-gray-700 text-center mb-4">
            Home component
        </h1>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, expedita? Officiis autem, omnis hic similique facere tempora culpa animi quisquam commodi illum sapiente error fugiat? Nobis, architecto? Sapiente, laborum sint!
        </p>
    </div>
</template>

<script>
export default {};
</script>

Conclusion and next steps

Overall, pretty simple but it is nice to save the steps every time we want to do some experimenting. You can grab the source from Github for yourself. Next time, we'll add Laravel Breeze for some simple authentication and set up our TDD workflow as well.