๐Ÿ“ฆ J-Sek / vuetify-vite-example

โ˜… 0 stars โ‘‚ 0 forks ๐Ÿ‘ 0 watching
๐Ÿ“ฅ Clone https://github.com/J-Sek/vuetify-vite-example.git
HTTPS git clone https://github.com/J-Sek/vuetify-vite-example.git
SSH git clone git@github.com:J-Sek/vuetify-vite-example.git
CLI gh repo clone J-Sek/vuetify-vite-example
J-Sek J-Sek use UnoCSS for icons 2110187 3 months ago ๐Ÿ“ History
๐Ÿ“‚ main View all commits โ†’
๐Ÿ“ public
๐Ÿ“ src
๐Ÿ“„ .browserslistrc
๐Ÿ“„ .editorconfig
๐Ÿ“„ .gitignore
๐Ÿ“„ env.d.ts
๐Ÿ“„ eslint.config.js
๐Ÿ“„ index.html
๐Ÿ“„ package.json
๐Ÿ“„ pnpm-lock.yaml
๐Ÿ“„ README.md
๐Ÿ“„ tsconfig.app.json
๐Ÿ“„ tsconfig.json
๐Ÿ“„ tsconfig.node.json
๐Ÿ“„ unocss.config.ts
๐Ÿ“„ vite.config.mts
๐Ÿ“„ README.md

Vuetify (Default)

This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.

โ—๏ธ Important Links

๐Ÿ’ฟ Install

Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:

Package ManagerCommand
yarnyarn install
npmnpm install
pnpmpnpm install
bunbun install
After completing the installation, your environment is ready for Vuetify development.

โœจ Features

  • ๐Ÿ–ผ๏ธ Optimized Front-End Stack: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. Vue 3 | Vuetify 3
  • ๐Ÿ—ƒ๏ธ State Management: Integrated with Pinia, the intuitive, modular state management solution for Vue.
  • ๐Ÿšฆ Routing and Layouts: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts-next for organizing Vue file layouts. Vue Router | vite-plugin-vue-layouts-next
  • ๐Ÿ’ป Enhanced Development Experience: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. TypeScript | ESLint Plugin Vue
  • โšก Next-Gen Tooling: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). Vite
  • ๐Ÿงฉ Automated Component Importing: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. unplugin-vue-components
  • ๐Ÿ› ๏ธ Strongly-Typed Vue: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. vue-tsc
These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.

๐Ÿ’ก Usage

This section covers how to start the development server and build your project for production.

Starting the Development Server

To start the development server with hot-reload, run the following command. The server will be accessible at http://localhost:3000:

yarn dev

(Repeat for npm, pnpm, and bun with respective commands.)

Add NODEOPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node v21.3.0 or higher, you can change this to NODEOPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.

Building for Production

To build your project for production, use:

yarn build

(Repeat for npm, pnpm, and bun with respective commands.)

Once the build process is completed, your application will be ready for deployment in a production environment.

๐Ÿ’ช Support Vuetify Development

This project is built with Vuetify, a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

๐Ÿ“‘ License

MIT

Copyright (c) 2016-present Vuetify, LLC