What Is ViteJS?

Vite ⚡

Next Generation Frontend Tooling

  • 💡 Instant Server Start
  • ⚡️ Lightning Fast HMR
  • 🛠️ Rich Features
  • 📦 Optimized Build
  • 🔩 Universal Plugin Interface
  • 🔑 Fully Typed APIs

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

Migrating from 1.x

Check out the Migration Guide if you are upgrading from 1.x.

Packages

PackageVersion (click for changelogs)
vitevite version
@vitejs/plugin-vueplugin-vue version
@vitejs/plugin-vue-jsxplugin-vue-jsx version
@vitejs/plugin-react-refreshplugin-react-refresh version
@vitejs/plugin-legacyplugin-legacy version
create-vitecreate-vite version

Download Details:
Author: vitejs
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/vitejs/vite 
License: MIT

#vue #vite #webdev 

What Is ViteJS?

Introduce Unplugin: Unified Plugin System for Vite, Rollup and Webpack

unplugin

Experimental

Unified plugin system for build tools.

Currently supports:

Hooks

unplugin extends the excellent Rollup plugin API as the unified plugin interface and provides a compatible layer base on the build tools used with.

Supported

HookRollupViteWebpack
transformInclude
transform
enforce❌*
resolveId
load
  • *: Rollup does not support using enforce to control the order of plugins. Users will need to maintain the order manually.

Usage

import { createUnplugin } from 'unplugin'

export const unplugin = createUnplugin((options: UserOptions) => {
  return {
    name: 'my-first-unplugin',
    // webpack's id filter is outside of loader logic,
    // an additional hook is needed for better perf on webpack
    transformInclude (id) {
      return id.endsWith('.vue')
    },
    // just like rollup transform
    transform (code) {
      return code.replace(/<template>/, `<template><div>Injected</div>`)
    },
    // more hooks coming
  }
})

export const vitePlugin = unplugin.vite
export const rollupPlugin = unplugin.rollup
export const webpackPlugin = unplugin.webpack

Plugin Installation

Vite

// vite.config.ts
import MyUnplugin from './my-unplugin'

export default {
  plugins: [
    MyUnplugin.vite({ /* options */ })
  ]
}

Rollup

// rollup.config.js
import MyUnplugin from './my-unplugin'

export default {
  plugins: [
    MyUnplugin.rollup({ /* options */ })
  ]
}

Webpack

// webpack.config.js
module.exports = {
  plugins: [
    require('./my-unplugin').webpack({ /* options */ })
  ]
}

Framework-specific Logic

While unplugin provides compatible layers for some hooks, the functionality of it is limited to the common subset of the build's plugins capability. For more advanced framework-specific usages, unplugin provides an escape hatch for that.

export const unplugin = createUnplugin((options: UserOptions, meta) => {

  console.log(meta.framework) // 'vite' | 'rollup' | 'webpack'

  return {
    // common unplugin hooks
    name: 'my-first-unplugin',
    transformInclude (id) { /* ... */ },
    transform (code) { /* ... */  },
    
    // framework specific hooks
    vite: {
      // Vite config
      configureServer(server) {
        // configure Vite server
      }
    },
    rollup: {
      // Rollup config
    },
    webpack(compiler) {
      // configure Webpack compiler
    }
  }
})

Starter Templates

Examples

Download Details:
Author: unjs
Download Link: Download The Source Code
Official Website: https://github.com/unjs/unplugin
License: MIT
 

#vue #vite #rollup #webpack #webdev 

Introduce Unplugin: Unified Plugin System for Vite, Rollup and Webpack

A Free Admin Panel Created with VueJS + Vite + Tailwind CSS

Admin Panel

Created with VueJS + Vite + Tailwind

Hi, this project is still in progress. I just begin my journey with Tailwind CSS, so I want to make something beautiful and useful. Let's learn together!

How to install

  1. Clone or download this repository
  2. Enter to admin-panel directory (with Terminal/CMD)
  3. Run: npm install
  4. Run: npm run dev for development, then open your favorite browser and go to address localhost:3000
  5. Run: npm run build for production
  6. Make your own changes and happy coding!

Icons

For the icons, I use Heroicons as mentioned on Tailwind CSS - Resources. And for simplicity used, I combining with vite-plugin-components to make it imported on-demand.

This configuration also supported both for outline icon and solid icon.

Patterns:

  • {name}-icon-o for outline icon
  • {name}-icon-s for solid icon

Examples:

<home-icon-o class="w-6 h-6 text-gray-500" />
<external-link-icon-s class="w-6 h-6 text-gray-500" />

Note for menu-item component, you just need to use the prop to define the icon. For example:

<menu-item icon="cube-icon-o" text="Components" :route="{name: 'components'}">

Download Details:
Author: ngekoding
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/ngekoding/admin-panel
 

#vue #vite #tailwind #vuejs #tailwindcss

 

A Free Admin Panel Created with VueJS + Vite + Tailwind CSS

A Free and Open Source Back-end Template with Vue, Vite and TypeScript

Vue vben admin

Introduction

Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScript and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.

Feature

  • State of The Art Development:Use front-end front-end technology development such as Vue3/vite2
  • TypeScript: Application-level JavaScript language
  • Theming: Configurable themes
  • International:Built-in complete internationalization program
  • Mock Server Built-in mock data scheme
  • Authority Built-in complete dynamic routing permission generation scheme.
  • Component Multiple commonly used components are encapsulated twice

预览

Test account: vben/123456

VbenAdmin LogoVbenAdmin LogoVbenAdmin Logo

Use Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

Open in Gitpod

Documentation

Document

Preparation

  • node and git - Project development environment
  • Vite - Familiar with vite features
  • Vue3 - Familiar with Vue basic syntax
  • TypeScript - Familiar with the basic syntax of TypeScript
  • Es6+ - Familiar with es6 basic syntax
  • Vue-Router-Next - Familiar with the basic use of vue-router
  • Ant-Design-Vue - ui basic use
  • Mock.js - mockjs basic syntax

Install and use

  • Get the project code
git clone https://github.com/anncwb/vue-vben-admin.git
  • Installation dependencies
cd vue-vben-admin

yarn install
  • run
yarn serve
  • build
yarn build

Change Log

CHANGELOG

Project

How to contribute

You are very welcome to join!Raise an issue Or submit a Pull Request。

Pull Request:

  1. Fork code!
  2. Create your own branch: git checkout -b feat/xxxx
  3. Submit your changes: git commit -am 'feat(function): add xxxxx'
  4. Push your branch: git push origin feat/xxxx
  5. submitpull request

Git Contribution submission specification

reference vue specification (Angular)

  • feat Add new features
  • fix Fix the problem/BUG
  • style The code style is related and does not affect the running result
  • perf Optimization/performance improvement
  • refactor Refactor
  • revert Undo edit
  • test Test related
  • docs Documentation/notes
  • chore Dependency update/scaffolding configuration modification etc.
  • workflow Workflow improvements
  • ci Continuous integration
  • types Type definition file changes
  • wip In development

Related warehouse

If these plugins are helpful to you, you can give a star support

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, not IE

Edge
IE
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
not supportlast 2 versionslast 2 versionslast 2 versionslast 2 versions

Download Details:
Author: anncwb
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/anncwb/vben-admin-thin-next
License: MIT

English | 中文

#vue #vuejs #vite #webdev 

A Free and Open Source Back-end Template with Vue, Vite and TypeScript
Kobe  Abshire

Kobe Abshire

1629637080

Find out Symfony/ViteJS : Utiliser ViteJS avec Symfony

Dans cette vidéo je vous propose de découvrir comment intégrer [ViteJS](https://vitejs.dev/) dans un projet Symfony.

#vite #symfony 

Find out Symfony/ViteJS : Utiliser ViteJS avec Symfony

Why You Should use Vitesse on Your Next Project

Vitesse is a Vue.js 3 starter template made with Vite and a lot of different plugins and modules. In this video I discuss all the different parts of Vitesse and why you should use it on your next project

👉 Check out Vitesse:
https://github.com/antfu/vitesse

0:00 Introduction To Vitesse
0:30 What is Vitesse
01:12 What Extensions You Need
03:18 Tour of App
04:12 File Based Routing With Script Setup
06:21 Working With Props and Dynamic Component Imports
09:08 Setting up useI18n Internationalization
10:52 Importing Markdown
12:50 Adding new Layouts
15:29 Working with WindiCSS
17:00 Changing header with useHead
17:43 Testing out SSG
18:21 Dynamic Routes

#vue #vite #javascript #vitesse 

Why You Should use Vitesse on Your Next Project

Vite + Vue 3 + TypeScript + Tailwind CSS Starter Template

Vite Typescript + Tailwind Starter

Simple, opinionated, fully typed, and production-ready project template for Vite.

Editor screenshot

This template is practical and batteries included but not overly complex or bloated. Also explicit configuration over magic; it should be easy to understand how everything works, strip out anything you don't need, and fast to modify things to your needs.

Includes plenty of examples of how to do things but minimal cruft to delete to get you going.

A detailed changelog is available.

Features

  • Vue 3
  • Fully typed Vuex 4 store
  • Routing using vue-router 4
  • TypeScript 4.3
  • Tailwind CSS 2.2 w/ JIT compiler + following plugins preinstalled
    • @tailwindcss/aspect-ratio
    • @tailwindcss/line-clamp
    • @tailwindcss/typography
    • @tailwindcss/forms
    • firefox-variant
  • PostCSS 8 w/ postcss-nesting plugin
  • Eslint
  • Prettier
  • Alias @ to <project_root>/src
  • Manually configured global components in main.ts
  • Predefined global variables:
    • VITE_APP_VERSION is read from package.json version at build time
    • VITE_APP_BUILD_EPOCH is populated as new Date().getTime() at build time
  • Using newest script setup syntax w/ Ref sugar (see the official Script Setup documentation and Ref Sugar RFC discussion)
  • Cypress.io e2e tests (configured similarly to vue-cli)
  • GitHub workflows
    • Dependabot
    • Automated e2e tests
  • GitLab CI

Notes

  • In order to take full advance of the new script setup sugar and full TypeScript support in Vue SFC templates (like in the screenshot above), you should disable Vetur and use Volar instead. (This is totally optional but recommended as it results much better DX!) See official IDE Support documentation.
  • If you need more than one parameter in the typed Vuex actions, use payload object instead of multiple parameters. For example:

Project setup and usage

Install dependencies:

yarn

Run development server:

yarn dev

Open Cypress test runner:

yarn test

Run Cypress tests in headless mode:

yarn test:ci

Build and preview built site locally:

yarn preview

Build:

yarn build

Elsewhere

Contributing

Contributions are welcome! Please follow the code of conduct when interacting with others.

[Action.updateItem](
  { commit }: AugmentedActionContext,
  payload: {
    id: string
    obj: Partial<MyItem>
  }
): Promise<void>

Download Details:

Author: Uninen
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/Uninen/vite-ts-tailwind-starter 
License: MIT

#vite #vue #typescript #tailwindsss

Vite + Vue 3 + TypeScript + Tailwind CSS Starter Template
Carmella  Pagac

Carmella Pagac

1627345680

Easiest How to Install Tailwind CSS with Vue 3 and Vite

In this video I will show you how to install Tailwind CSS with Vite - which is a super fast development environment for Vue 3 - by the creator of Vue himself.

#tailwind #tailwindcss #vue3 #vite

#tailwind #tailwindcss #vue #vite

Easiest How to Install Tailwind CSS with Vue 3 and Vite

Crea un proyecto React con Vite en menos de 1 minuto

Vite te ayudará a arrancarr un proyecto con React (y cualquier framework frontend) en menos de un minuto 😱. ¡MIRA CÓMO!

#react #vite #vue

Crea un proyecto React con Vite en menos de 1 minuto
Dallas  Veum

Dallas Veum

1626830074

Set up a new Vue 3 project with Vite and Tailwind (Deploy to Vercel!)

Learn how to create a new Vue 3 project with Vite, install Tailwind, and deploy our project to Vercel! I’ll take you through every step from start to finish.

  • 0:00 - Introduction
  • 0:55 - Why Vite?
  • 1:25 - Create Vue/Vite Project
  • 2:14 - Why Tailwind?
  • 2:31 - Install Tailwind
  • 4:40 - Deploy to Vercel

#vue #vite #tailwind #tailwindcss #vercel

Set up a new Vue 3 project with Vite and Tailwind (Deploy to Vercel!)
Alec  Nikolaus

Alec Nikolaus

1626711819

Build & Deploy a YouTube Thumbnail Fetcher aAp with React & TypeScript Part 2 | Vite | Tailwind CSS

Hello, my friends and fellow developers, we are building a project using React and TypeScript! In this video, we have set up the project using Vite, and we have used Tailwind CSS’s new Just-In-Time mode for designing.

#react #typescript #vite #tailwindcss #tailwind

Build & Deploy a YouTube Thumbnail Fetcher aAp with React & TypeScript Part 2 | Vite | Tailwind CSS

A Vue3 Starter Project With Vite And Tailwind CSS

vue-3-stackter

Cover Image

A Vue3 starter project setup with

  • Vite
  • vue-meta-3.0.0-alpha.8
  • Router
  • Vuex
  • Eslint
  • Prettier
  • Tailwind CSS
  • and some custom preferences.

Run this project:

yarn
yarn dev

Change site name

In App.vue change the following,

const siteName = 'Vite App' // add your site name here

Layouts

You can add layouts in your project if you want. You will find a default.vue layout example in this project.

Pages

You can add pages to your project. You will find two example pages in the pages directory (Home.vue and About.vue). Do not forget to register the pages in the router. You will also find a router/index.js file to register your pages.

Meta info

You can add meta information in your pages. Here is an example,

<script setup>
import { useMeta } from 'vue-meta'

useMeta({
    title: 'Homepage',
})
...

</script>

Download Details:

Author: shamscorner
Download Link: Download The Source Code
Official Website: https://github.com/shamscorner/vue-3-stackter

#vue #vite #tailwind #tailwindcss

A Vue3 Starter Project With Vite And Tailwind CSS
Alec  Nikolaus

Alec Nikolaus

1626081109

Build & Deploy A YouTube Thumbnail Fetcher App with React & TypeScript Part 1 | Vite | Tailwind CSS

Hello, my friends and fellow developers, we are building a project using React and TypeScript! In this video, we have set up the project using Vite, and we have used Tailwind CSS’s new Just-In-Time mode for designing.

Let me know in the comments below if you want more React & TypeScript videos or any other videos.

🔴 Subscribe here: https://bit.ly/2K5Ydaf

Links in the video:

  • Tailwind CSS JIT: https://tailwindcss.com/docs/just-in-time-mode
    
  • Tailwind Vite Setup docs: https://tailwindcss.com/docs/guides/vue-3-vite
    
  • Secret Language app tutorial: https://youtu.be/6N7rfZDvzzI
    

🔥 Timestamps Start 🔥

  • 00:00 - Introduction & Demo
  • 02:14 - Setup with Vite
  • 04:43 - Tailwind CSS setup (Just-In-Time mode)
  • 06:56 - Deleting some files
  • 07:34 - Working on the app
  • 08:07 - Creating the header
  • 12:20 - Creating the input
  • 21:00 - Conclusion

🔥 Timestamps End 🔥

Other Tutorials:

  • ⚛️ React and Material UI Todo App: https://bit.ly/reactmattodo
    
  • 🟨 Other JavaScript videos: https://bit.ly/jstutorials
    
  • 📘 Visual Studio Code videos: https://bit.ly/vscodevids
    
  • 🔋 Build a Battery App in JS: https://youtu.be/J8_hwKSeffY
    

Connect 🔗 :

  • Twitter: https://twitter.com/MaxProgramming1
    
  • Facebook: https://www.facebook.com/Max-Programming-103081931147293    
    
  • Github: https://github.com/max-programming/
    

VS Code Theme used: Cobalt 2

Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!

#react #vite #tailwindcss #typescript #javascript

#typescript #react #tailwindcss #vite #vue

Build & Deploy A YouTube Thumbnail Fetcher App with React & TypeScript Part 1 | Vite | Tailwind CSS
Mark Mara

Mark Mara

1626064977

A Minimal Setup & Fast Boilerplate for React.js with Vite: Reactplate

A Minimal Setup & Fast Boilerplate for React.js with Vite

Features

🚀 Dynamic Pages Routing with react-router-dom from React.js
🚀 Fast development with Vite
🚀 SSR support with Vite
🚀 PWA support with Vite
🚀 SSG support with Vite


Installation

create-reactplate-app

npx create-reactplate-app blog-starter

cd blog-starter

npm install

# run server (development mode)
npm run dev
# run server (production mode)
npm run serve
# run debugger
npm run debug

# build the client side & the server side project
npm run build

# build the client side project
npm run build:client

# build the server side project
npm run build:server

# static site generate
npm run generate

Development

For further development and contributions, please follow the installation instructions below.

git clone https://github.com/fauzan121002/reactplate.git

# Reactplate CRA cli scope
cd reactplate

#----------------------------------

# Reactplate app scope
cd reactplate/examples

npm install

# run server (development mode)
npm run dev
# run server (production mode)
npm run serve
# run debugger
npm run debug

# build the client side & the server side project
npm run build

# build the client side project
npm run build:client

# build the server side project
npm run build:server

# static site generate
npm run generate

Built-in Configuration

Import Aliases

  • @ equals to _ROOT_/src
  • # equals to _ROOT_/src/components
  • % equals to _ROOT_/src/assets

ESBuild

ESBuild already injects import React from 'react'; for any .jsx files so you don’t need to import it again.

Dynamic Pages Routing

Reactplate Dynamic Pages Routing folder structure works like Next.js.

pages
│   Home.jsx
│   About.jsx
│
└───Rank
│   │   [rank].jsx
│   └───subfolder1
│       │   [others].jsx
│       │   ...

Using the params example

// Rank/[rank].jsx
import { useParams } from "react-router-dom";

export default function rank() {
  const { rank } = useParams();
  return <div>Reactplate will be number {rank}</div>;
}

Note : Index page will refer to Home.jsx

URL Convertion

Reactplate will convert any jsx files filename with PascalCase or camelCase to kebab-case.

Example :

pages
│   Home.jsx
│   AboutMe.jsx
│
└───myRank
│   │   [rank].jsx
│   └───subfolder1
│       │   [others].jsx
│       │   ...

will be converted to :

/home
/about-me
/my-rank/:rank
/my-rank/:rank/subfolder1/:others
...

Credits

Credits to React.js and Vite teams for their awesome open source and resources!

Download Details:

Author: fauzan121002
Download Link: Download The Source Code
Official Website: https://github.com/fauzan121002/reactplate
License: Reactplate using the MIT License

#react #vite #vue #vuejs #reactjs

A Minimal Setup & Fast Boilerplate for React.js with Vite: Reactplate

How to Setup a New React Project from Scratch using Vite

In this post I will show you how to set up a new React project from scratch using Vite.

If you haven’t heard of it yet, Vite is a new build tool for frontend apps (created by Evan You, the creator of Vue.js). It works much like Webpack and Parcel but faster (“vite” means fast in French). Vite uses the amazing esbuild behind the scenes. esbuild is a JavaScript (and TypeScript) bundler written in Golang which is one of the reason it’s so fast.

Often when building a new project with React it is recommended to start with create-react-app. But now that Vite is here, you can easily set up a new project from scratch yourself, because Vite is very simple to configure.

Before we start, you will need to install Node.js and NPM (bundled with Node.js) if you haven’t already. I will be using NPM in this guide but if you prefer Yarn or PNPM, feel free to use it.

#vite #react #vue

How to Setup a New React Project from Scratch using Vite