Vue Templates Logo Vue Templates
Vite Vue2 Vuetify Ts Starter screenshot

Vite Vue2 Vuetify Ts Starter

Author Avatar Theme by Logue
Updated: 25 Dec 2023
85 Stars

@vitejs template for @vuejs 2+@vuetifyjs+TypeScript

Github

Categories

Vite Scss Vuetify

Overview

This product is a starter project that combines Vite (a build tool), Vue 2 (a JavaScript framework), TypeScript (a typed superset of JavaScript), and Vuetify (a UI framework). It provides a template for developing web applications using these technologies. The project includes additional features such as vue-router, Vuex, ESLint, Stylelint, and Prettier for code formatting. It also includes vite-plugin-checker for real-time checking and vite-plugin-vitest for testing. The template supports the Composition API introduced in Vue 2.7 and includes support for Teleport, a mechanism for installing Vue components anywhere. It also provides examples for including JSON-LD and using vue-i18n for internationalization. The recommended IDE setup is using VSCode with the Volar extension. The product includes various commands for running the development server, checking markup, linting, testing, and building for production.

Features

  • Vite: A build tool for web applications.
  • Vue 2: A JavaScript framework for building user interfaces.
  • TypeScript: A typed superset of JavaScript, providing improved static typing.
  • Vuetify: A UI framework for Vue.js applications.
  • Vue Router: A Vue.js plugin for client-side routing.
  • Vuex: A state management pattern/library for Vue.js applications.
  • ESLint: A pluggable linting utility for JavaScript and TypeScript.
  • Stylelint: A pluggable linting utility for CSS.
  • Prettier: An opinionated code formatter.
  • vite-plugin-checker: A Vite plugin for real-time checking of code.
  • vite-plugin-vitest: A Vite plugin for testing.
  • Composition API: Standard support for the Composition API in Vue 2.7.
  • Teleport: A mechanism for installing Vue components anywhere.
  • JSON-LD Example: An example of including JSON-LD in the project.
  • Vue i18n: A package for internationalization in Vue.js applications.
  • VSCode + Volar: Recommended IDE setup for development.

Installation

To install and use this starter project, follow these instructions:

  1. Create a new project directory.
  2. Navigate to the project directory in the terminal.
  3. Run the following command to clone the starter project:
git clone [repository-url]
  1. Run the following command to install the dependencies:
npm install
  1. Configure the environment variables by creating a .env file and defining the VITE_APP_TITLE variable.
  2. Start the development server by running the following command:
npm run dev
  1. Use the provided commands for linting, testing, and building the project.

Summary

This product is a starter project that combines Vite, Vue 2, TypeScript, and Vuetify to provide a template for building web applications. It includes various features such as vue-router, Vuex, ESLint, Stylelint, and Prettier. The template supports the Composition API and includes support for Teleport, JSON-LD, and vue-i18n. The recommended IDE setup is using VSCode with the Volar extension. Overall, this starter project provides a solid foundation for developing Vue.js applications with a modern tooling setup.