Pronto Fuel

screenshot of Pronto Fuel
vite
vue
scss
tailwind

A Laravel + Inertia starter kit powered by Vite

Overview:

Pronto Fuel is a heavily opinionated starter kit for Laravel and Inertia.js powered by Vite. It provides a comprehensive set of features and leverages the latest technologies and frameworks such as Inertia.js, Vue 3, Vite, Tailwind CSS, and Quasar Framework. The starter kit aims to streamline the development process by offering autoimporting features, code splitting, server-driven toast notifications, and more. It also includes preconfigured development environments like the VSCode Dev Container with all the necessary tools. Pronto Fuel is designed to enforce code quality through ESLint and StandardJS integration.

Features:

  • Inertia.js: Pronto Fuel utilizes Inertia.js, which allows developers to build single-page applications using server-side routing and server-driven rendering.
  • Vue 3: The starter kit leverages Vue 3, the latest version of the popular JavaScript framework, to enable the development of interactive and dynamic user interfaces.
  • Vite: Pronto Fuel is powered by Vite, a fast build tool for Vue.js applications, offering rapid server hot-reloading and optimized production builds.
  • <script setup> syntax for Vue: Pronto Fuel encourages the use of the new <script setup> syntax for Vue, providing a cleaner and more concise approach to writing component logic.
  • Components auto importing: The starter kit facilitates component management by automatically importing common Vue and Inertia APIs, reducing boilerplate code.
  • Pages Code Splitting: Pronto Fuel offers out-of-the-box code splitting functionality, allowing for more efficient loading of pages in the application.
  • Server Driven toast notification system: Pronto Fuel includes a server-driven toast notification system with a queue in place, ensuring the display of relevant and timely notifications to users.
  • Server Driven dialogs: The starter kit supports server-driven dialogs, enabling dynamic creation and display of dialogs based on server-side responses.
  • Inline Inertia Persistent Layouts: Pronto Fuel integrates inline Inertia persistent layouts, allowing for consistent and easily maintainable layouts across pages.
  • Tailwind CSS configured with common PostCSS plugins: The starter kit comes preconfigured with Tailwind CSS, a highly customizable CSS framework, and includes common PostCSS plugins like nesting and extend rule for enhanced styling capabilities.
  • Quasar Framework configured with over 70 ready-to-use Material Design components: Pronto Fuel offers preconfigured integration with Quasar Framework, providing a wide range of ready-to-use Material Design components for faster and more efficient development.
  • Use icons from any icon sets: Pronto Fuel allows developers to easily use icons from any icon sets without any compromise on design or flexibility.
  • VSCode Dev Container with everything you need to start developing: The starter kit includes a VSCode Dev Container, providing a ready-to-use development environment with all the necessary tools and dependencies preconfigured.
  • Debug with Ray on port 23517 by default: Pronto Fuel offers debugging capabilities with Ray, a debugging tool, by default on port 23517.
  • Enforce code quality with ESLint and StandardJS: Pronto Fuel enforces code quality through integration with ESLint and StandardJS, helping developers write clean and consistent code.

Summary:

Pronto Fuel is a highly opinionated starter kit for Laravel and Inertia.js that offers a wide range of features and preconfigured tools to streamline the development process. It leverages the latest technologies and frameworks, such as Inertia.js, Vue 3, Vite, Tailwind CSS, and Quasar Framework. With autoimporting features, code splitting, server-driven notifications and dialogs, and inline Inertia persistent layouts, Pronto Fuel aims to enhance productivity and code quality. The included VSCode Dev Container and integration with ESLint and StandardJS further simplify development and enforce code consistency.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

vue
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.

scss
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.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

pinia
Pinia

Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.

postcss
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.