|
1 |
| -<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://cdn.devdojo.com/assets/svg/laravel-vue-logo.svg" width="300" alt="Laravel Logo"></a></p> |
2 |
| - |
3 |
| -<p align="center"> |
4 |
| -<a href="https://github.com/laravel/vue-starter-kit/actions"><img src="https://github.com/laravel/vue-starter-kit/workflows/tests/badge.svg" alt="Build Status"></a> |
5 |
| -<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a> |
6 |
| -</p> |
7 |
| - |
8 |
| -<img src="https://cdn.devdojo.com/images/december2024/screenshot.png" /> |
| 1 | +# Laravel + Vue Starter Kit |
9 | 2 |
|
10 | 3 | ## Introduction
|
11 | 4 |
|
12 |
| -Welcome to the Laravel **Vue Starter Kit**, a starter kit built using [Laravel](https://laravel.com), [Vue](https://vuejs.org), [Inertia](https://inertiajs.com), and [Tailwind CSS](https://tailwindcss.com). |
13 |
| - |
14 |
| -## Installation |
15 |
| - |
16 |
| -To install the starter kit, run the following command: |
17 |
| - |
18 |
| -1. git clone https://github.com/laravel/vue-starter-kit |
19 |
| -2. cd vue-starter-kit |
20 |
| -3. git checkout develop |
21 |
| -4. copy .env.example .env |
22 |
| -5. install dependencies `npm install && composer install` |
23 |
| -6. run migrations `php artisan migrate` |
24 |
| -7. add encryption key `php artisan key:generate` |
25 |
| -8. start the asset watcher `npm run dev` |
26 |
| - |
27 |
| -Visit the URL for your app and you're good to go! |
28 |
| - |
29 |
| -## Features |
30 |
| - |
31 |
| -This Starter Kit includes the following features: |
32 |
| - |
33 |
| -- **User Authentication** (login, register, password reset, email verify, and password confirmation) |
34 |
| -- **Dashboard Page** (Auth Protected User Dashboard Page) |
35 |
| -- **Settings Page** (Profile Update/Delete, Password Update, Appearance) |
36 |
| - |
37 |
| -## Front-end App Structure |
38 |
| - |
39 |
| -The majority of the front-end code is located in the `resources/js` folder. We follow Vue.js best practices and conventions for organizing these files and folders. The structure follows these naming conventions: |
40 |
| - |
41 |
| -**Folders**: Use kebab-case |
42 |
| - |
43 |
| -``` |
44 |
| -resources/js/ |
45 |
| -├── components/ # Reusable Vue components |
46 |
| -├── composables/ # Vue composables/hooks |
47 |
| -├── layouts/ # Application layouts |
48 |
| -├── lib/ # Utility functions and configurations |
49 |
| -├── pages/ # Page components |
50 |
| -└── types/ # Typescript definitions and interfaces |
51 |
| -``` |
| 5 | +Our Vue starter kit provides a robust, modern starting point for building Laravel applications with a Vue frontend using [Inertia](https://inertiajs.com). |
52 | 6 |
|
53 |
| -**Components**: Use PascalCase for component files |
| 7 | +Inertia allows you to build modern, single-page Vue applications using classic server-side routing and controllers. This lets you enjoy the frontend power of Vue combined with the incredible backend productivity of Laravel and lightning-fast Vite compilation. |
54 | 8 |
|
55 |
| -``` |
56 |
| -components/ |
57 |
| -└── AppearanceTabs.vue |
58 |
| -└── NavigationBar.vue |
59 |
| -``` |
| 9 | +This Vue starter kit utilizes Vue 3 and the Composition API, TypeScript, Tailwind, and the [shadcn-vue](https://www.shadcn-vue.com) component library. |
60 | 10 |
|
61 |
| -**Composables/Utilities**: Use camelCase for utility files and composables |
| 11 | +## Official Documentation |
62 | 12 |
|
63 |
| -``` |
64 |
| -composables/ |
65 |
| -└── useAuth.ts |
66 |
| -└── useSettings.ts |
67 |
| -``` |
| 13 | +Documentation for all Laravel starter kits can be found on the [Laravel website](https://laravel.com/docs/starter-kits). |
68 | 14 |
|
69 |
| -This structure aligns more with the default Vue conventions. |
| 15 | +## Contributing |
70 | 16 |
|
71 |
| -## Icons |
| 17 | +Thank you for considering contributing to our starter kit! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions). |
72 | 18 |
|
73 |
| -This starter kit leverages the [Lucide Vue Library](https://lucide.dev/guide/packages/lucide-vue-next), which provides you with a collection of over 1000 icons. View the full list of icons [here](https://lucide.dev/icons). |
| 19 | +## Code of Conduct |
74 | 20 |
|
75 |
| -Here's a quick example of using an icon in one of your Vue Components: |
| 21 | +In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct). |
76 | 22 |
|
77 |
| -``` |
78 |
| -<script setup lang="ts"> |
79 |
| - ... |
80 |
| - import { Rocket } from 'lucide-vue-next'; |
81 |
| - ... |
82 |
| -</script> |
| 23 | +## License |
83 | 24 |
|
84 |
| -<template> |
85 |
| - <p class="flex items-center space-x-2"> |
86 |
| - <Rocket /> |
87 |
| - <span class="text-lg font-medium">Vue Starter Kit</span> |
88 |
| - </p> |
89 |
| -</template> |
90 |
| -``` |
| 25 | +The Laravel + Vue starter kit is open-sourced software licensed under the MIT license. |
0 commit comments