|
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