Vue.js Vite

Vite is a french word that means fast. It's a new version of the front end build tool powered by Native ES module. It helps to improve the frontend development experience. It has two parts; a dev server and a build command. The dev server serves the source files over native ES modules. It has many built in features and a fast Hot Module Replacement. The build command bundles your code with Rollup.Vite is extensible upto a great extent using Plugin API and JavaScript API. Scaffolding the Vite project can be done as follows.

You will need a Node.js version greater than 12.0.0 before installing Vite. 

Using the npm type below command.

$ npm init @vitejs/app

You can specify your project name directly as shown below.


# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

It supports many presets like vanilla, Vue, Vue-ts, react etc.

In Vite project index.html is front-and-central instead of storing inside the public directory. Since the development phase Vite is a server index.html plays an important role in your application. Vite has a root directory from where your files are served. It is referred to as <root>. URLs in your project will be solved using project root as base so you will be able to write code like working with static file servers. When vite starts the dev server considers the current working directory as root by default but you can specify an alternative root with vite serve some/sub/dir. 

You can use vite binary in your npm scripts or run it using npx vite. 

{
  "scripts": {
    "dev": "vite", // start dev server
    "build": "vite build", // build for production
    "serve": "vite preview" // locally preview production build
  }
}

If you want to test the latest feature before a new release clone the vite repo to your local server and build and link it.

git clone https://github.com/vitejs/vite.git
cd vite
yarn
cd packages/vite
yarn build
yarn link

Then open your vite project and run yarn link vite and restart dev server.