How to Set Up an HTML Theme in Vue.js within Laravel 11

Setting up an HTML theme in a Vue.js-powered Laravel 11 project involves integrating static HTML templates into Vue components and serving them through Laravel’s backend. Below is a step-by-step guide:

1. Install Laravel 11

Start by creating a fresh Laravel 11 project if you haven’t already.

composer create-project laravel/laravel my-laravel-app
cd my-laravel-app

Set up the .env file with your database and application settings.

Run migrations to ensure everything is working:

php artisan migrate

2. Install Node.js and Dependencies

Ensure that Node.js and npm (or Yarn) are installed on your system. Then, install the necessary front-end dependencies for Laravel:

npm install

Install Vue.js and the Laravel Vite plugin:

npm install vue@next
npm install @vitejs/plugin-vue

3. Set Up Vue in Laravel

Update the vite.config.js file to enable Vue support.

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(),
    ],
});

In the resources/js/app.js file, initialize Vue:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Create the App.vue file in resources/js:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

4. Add the HTML Theme

Copy HTML Theme Files:
- Place your HTML theme assets (CSS, JS, images, etc.) into the public directory. For example:
  - public/css/ for CSS files.
  - public/js/ for JavaScript files.
  - public/images/ for images.
Create Vue Components for Pages:
Convert sections of your HTML theme into Vue components. For example, create a Header.vue file: <template> <header>  </header> </template> <script> export default { name: 'Header', }; </script> <style scoped> /* Add any CSS specific to the header here */ </style> Similarly, create Footer.vue, Sidebar.vue, and other components as needed.

5. Create a Layout Component

Combine your components into a layout file (e.g., Layout.vue):

<template>
  <div>
    <Header />
    <main>
      <slot></slot>
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue';
import Footer from './Footer.vue';

export default {
  components: {
    Header,
    Footer,
  },
};
</script>

<style>
/* Add layout-wide styles */
</style>

6. Set Up Vue Router

Install Vue Router to handle page navigation:

npm install vue-router@next

Create a router.js file in resources/js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

Update app.js to include the router:

import router from './router';

createApp(App).use(router).mount('#app');

7. Use Components in Pages

For example, create a Home.vue file:

<template>
  <Layout>
    <div class="container">
      <h1>Welcome to the Home Page</h1>
      <!-- Add your home page content -->
    </div>
  </Layout>
</template>

<script>
import Layout from './Layout.vue';

export default {
  components: {
    Layout,
  },
};
</script>

8. Run the Development Server

Start the development server to test your setup:

npm run dev

Visit your application in the browser (e.g., http://localhost:5173) to see your HTML theme rendered in the Vue.js and Laravel setup.

9. Deploying the Project

When ready to deploy, build the front-end assets:

npm run build

Deploy the Laravel application as usual, ensuring the assets are included in the public folder.

Conclusion

By following these steps, you can seamlessly integrate an HTML theme into a Vue.js project within Laravel 11. This approach allows you to combine the power of Vue.js for dynamic front-end components with Laravel’s robust back-end capabilities.