Laravel Vue Boilerplate
:elephant: A Laravel 8 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.
Overview
The Laravel Vue Boilerplate is a Laravel 8 Single Page Application boilerplate that utilizes Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug. It provides a users CRUD system for admin users using RESTful and GraphQL. It also includes i18n support for English, Portuguese, and Spanish based on browser language settings. The authentication system is built using Laravel Sanctum. Additionally, the boilerplate includes WebSockets with Laravel Echo and Pusher, and a working service worker with Workbox for better Progressive Web App (PWA) development. The Dockerfile is pre-configured with PHP 7.4, Node.js 12, Composer, MySQL, and phpMyAdmin using Docker Compose.
Features
- Users CRUD system for admin users written in RESTful and GraphQL
- Internationalization (i18n) support for English, Portuguese, and Spanish
- Authentication system using Laravel Sanctum
- WebSockets with Laravel Echo and Pusher
- Service worker with Workbox for PWA development
- Dockerfile with pre-configured PHP 7.4, Node.js 12, Composer, MySQL, and phpMyAdmin
- Front-end dependencies include Vue, VueRouter, Vuex, vue-apollo, vuex-i18n, Bootstrap 4, BootstrapVue, Workbox, TypeScript, Pug, and Sass
- Back-end dependencies include Laravel, Laravel GraphQL, Laravel Sanctum, and laravel-vue-i18n-generator
Using Docker
- Start Docker:
docker-compose up -d
- Run Laravel Mix on another terminal:
npm run dev
- The application will be available at http://localhost:8000 and phpMyAdmin at http://localhost:8081.
Common Way
- Rename the
.env.examplefile to.envand fill it with your local information. - Install PHP and JavaScript dependencies:
composer install
npm install
- Generate Laravel keys:
php artisan key:generate
- Generate i18n strings for Vue based on Laravel i18n files:
php artisan vue-i18n:generate
- Migrate and seed the database:
php artisan migrate --seed
- Compile all the front-end assets:
npm run dev
Summary
The Laravel Vue Boilerplate is a powerful boilerplate for developing Laravel 8 Single Page Applications using Vue.js. It provides essential features such as a users CRUD system, internationalization support, authentication, WebSockets, and service worker integration for PWA development. The inclusion of Docker and pre-configured dependencies make it easy to set up and start developing with. Overall, it offers a comprehensive starting point for building modern web applications with Laravel and Vue.
- Laravel
Laravel is a powerful and elegant PHP framework that provides developers with a comprehensive set of tools and features to build robust web applications. It follows the Model-View-Controller (MVC) architectural pattern, offering a clean and organized structure for writing efficient and maintainable code.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Docker
A website that uses Docker for containerization to streamline development, testing, and deployment workflows. This includes features such as containerization of dependencies, automated builds and deployments, and container orchestration to ensure scalability and availability.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Pug
Pug is a high-performance template engine for Node.js and browsers that enables developers to write HTML templates using a concise and intuitive syntax. It supports a range of features, including template inheritance, conditionals, loops, mixins, and more, and can be easily integrated into a variety of web frameworks and build tools.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.