#

Introduction

#

This guide will walk you through the process of creating a modern blog using Laravel as the backend, Vue.js as the frontend framework, and Tabler.io for an attractive user interface.

Step 1: Environment Setup

#

Before we begin, ensure you have the following installed:

• PHP (7.4 or newer)
• Composer
• Node.js and npm
• Git

Step 2: Laravel Installation

#

1. Open your terminal and run the following command:

   composer create-project laravel/laravel blog
   cd blog
   

2. Install Laravel UI and configure Vue.js:

   composer require laravel/ui
   php artisan ui vue
   

Step 3: Vue.js and Tabler.io Configuration

#

1. Install the required npm packages:

   npm install
   npm install @tabler/core
   

2. Configure Vite (file: 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,
                   },
               },
           }),
       ],
   });
   

3. Configure resources/js/app.js:

   import './bootstrap';
   import { createApp } from 'vue';
   import App from './App.vue';
   
   createApp(App).mount('#app');
   

4. Add Tabler.io styles in resources/css/app.css:

   @import '@tabler/core/dist/css/tabler.min.css';
   

Step 4: Development Server Configuration

#

To simplify starting the development server, we’ll create a bash alias:

1. Open your ~/.bashrc or ~/.bash_aliases file.
2. Add the following line (replace the IP with your own address):

   alias serve-blog='(php artisan serve --host=192.168.1.100 --port=8000 &) && npm run dev'
   

3. Save the file and run source ~/.bashrc (or the appropriate file).

Now you can use the serve-blog command in your project directory to start the Laravel server and npm process.

Next Steps

#

In the upcoming sections, we’ll cover:

1. Creating the main Vue component
2. Configuring Laravel routing
3. Building basic blog views
4. Integrating Tabler.io with Vue components

Stay tuned for more!