Laravue

The Boilerplate Laravel 9.x and Vue 3.x, Download it and happy coding let's create great app.

How to Download

Clone or Download

Paste code below into terminal and make sure where it downloaded.
```
git clone https://github.com/nnivxix/laravue.git
```
Enter to the folder laravue
```
cd laravue
```
Open your favorit code editor or IDE.

example opeing Visual Studio Code
```
code .
```

How to install from zero

⚠️ Make sure you have basic Laravel boilerplate.

If you wondering how to install Vue inside Laravel, first thing you have install package vue, @vitejs/plugin-vue and vue-loader

npm i vue vue-loader @vitejs/plugin-vue

then setup vue and create vue file

|--resources
|----js
|------app.js
|------App.vue
|---..
|vite.config.js

// app.js

import './bootstrap';

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

createApp(app).mount("#app");

<!-- App.vue -->

<template>
  <h1>
    hello laravue
  </h1>
  <ul>
    <li>hei</li>
    <li>hello</li>
  </ul>
</template>

Setup config of Vite

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // add plugin

export default defineConfig({
  plugins: [
    vue(), // add this
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
});

and finally create attribute <div id="app"> and special syntax blade @vite'resources/js/app.js')

<!-- welcome.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">
    <title>Laravel</title>
  </head>
  <body class="antialiased">
    <div id="app">

    </div>
    @vite('resources/js/app.js')
  </body>
</html>

don't forget to set env variable APP_URL

APP_URL=http://localhost:8000

running the server and BOOOM.

nnivxix/laravue

Laravue

How to Download

How to install from zero