General

Introduction to Vite - Next Generation Frontend Tooling

Published Mar 16, 2021

Updated Feb 14, 2023

9 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Introduction

In April 2020, Evan You, the creator of Vue, started to share some work on a new development server called Vite. Here is the first tweet about the idea that Evan shared.

At the time, it was an experiment to see what could be done to improve the development experience for Vue applications. Evan You joked that Vite was created to power an improved version of VuePress for blogging purposes.

Recently, Vite 2 was released as the first stable version, and in Vue Contributer Days 2021 Evan discussed that Vite would be, "the foundation that we are going to be focusing on for future Vue-oriented tooling."

At Vue Contributor Days, Evan noted that, "putting [new developers] through webpack doesn't feel like the ideal experience for a progressive framework," and that Vite was going to be highlighted as the next step as a developer

But what exactly is Vite? How does it work? And how can it be used in development today?

Vite - Next Generation Frontend Tooling

According to the official Vite site, Vite is, "a build tool that aims to provide a faster and leaner development experience for modern web projects." It achieves this in two parts.

First, while in development, application code is not bundled (which is currently how development is done using Vue CLI or Create React App). Instead, the code is imported into the browser using ES Modules, the native module system for Javascript. Since ESM is supported in all modern browsers, Vite can leverage this to completely remove a build step while in development.

Any libraries that need to be imported are still compiled, but for that, Vite uses esbuilt a fast build tool written in Go. Per the Vite website, "Esbuild pre-bundles dependencies 10-100x faster than JavaScript-based bundlers."

Second, Vite provides a build step using Rollup that has been highly optimized for generating static assets. By leveraging Rollup, Vite also provides a diverse plugin ecosystem. Standard Rollup plugins can be used with Vite, as well as custom Vite-specific plugins. [From the documentation]:(https://vitejs.dev/guide/api-plugin.html) "Vite plugins extends Rollup's well-designed plugin interface with a few extra vite-specific options. As a result, you can write a Vite plugin once and have it work for both dev and build."

Vite also provides built-in support for:

Typescript
JSX and TSX
Importing CSS files and CSS preprocessor files like .scss and .less
Static assets such as images and JSON files

One key thing to note is that Vite is not Vue-specific. While the original versions of Vite were geared towards Vue 3, the current release of Vite supports any frontend framework, with supported templates for Vue, React, Preact, Lit Element, Svelte, and vanilla Javascript. At its core, Vite is simply a build tool and development environment that can be leveraged by anyone.

Getting Started

To start working with a Vite-based app, open your terminal and run the below command:

# NPM
npm init @vitejs/app

# Yarn
yarn create @vitejs/app

A prompt will guide you to select a name for your app and the template you want to use. For this article, we will be looking at a Vue application, but as noted above, there are many options available for building apps in Vite.

Once you select your name and template, you will be guided to navigate to the newly created folder, run npm install (or yarn). And that's it! Compared to both Create React App and the Vue CLI, this step is much faster, because there's less to install.

Now that your local setup is ready, let's get to work! In your terminal, run the following to get Vite running:

# NPM
npm run dev

# Yarn
yarn dev

When the dev command is run, esbuild is used to pre-bundle any dependencies you are using (in this case, the only dependency we have is Vue), then provides the URL to open the app itself. For this test, that build step took less than a second (subsequent startup times were around 200ms). For larger applications, it might take longer, but it's only run when Vite finds that your dependencies or configuration has changed. In general, this will only happen occassionally.

Open your browser to the provided URL (by default, localhost:3000), and you will see your app load as expected. If we open the network tab, you will also see that each component is imported into your application separately. This is because we are using ES Modules, rather than bundling everything into a single import. Neat!

Also of note: As you build out your application, only the relevant code is fetched into the browser. If you have multiple pages, each with unique components, those components will only be loaded as you navigate to those pages.

Let's take a quick look at the file structure. If you're familiar with the Vue CLI, the output from Vite is very similar. The main difference is that the index.html file is located in the root folder, rather than in the public folder. Otherwise, it should be very familiar.

Development using Vite is also very familiar. Create components, import files- everything you are used to doing with Vue CLI or Create React App should work as expected. When you're ready to deploy your app, run the below command:

# NPM
npm run build

# Yarn
yarn build

Configuration and Plugins

Vite provides a helpful way to manage any configuration for your project. From the Vite documentation, "When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project root."

As with a Vue CLI app, vite.config.js allows for a wide variety of configurations, including setting a base URL, any proxies to a backend service, and where to output the build files. In addition, plugins are also added to Vite in this file. Despite being a young platform, there are a wide range of plugins already available (some Rollup plugins can also be used in Vite).

Here's a few notable plugins to be aware of:

vite-plugin-pwa - Zero-config PWA.
vite-plugin-windicss - Windi CSS integration (Tailwind-compatible CSS framework).
vite-plugin-pages - File system based route generator for Vue.
vite-plugin-md - Markdown as Vue components / Vue components in Markdown.
@brillout/vite-plugin-mdx - (React) Use MDX for your Vite app, with support for MDX v1, MDX v2, HMR, and SSR.
vite-plugin-ruby - Vite configuration for Ruby backends.

There are a lot more plugins and other community contributions to look at as well. Check out this list of awesome Vite plugins for more examples!

Why Use Vite?

The primary benefit of Vite is the development experience. Vite starts fast, loads fast, and allows you as a developer to get your job done better. In addition, the plugin ecosystem allows you to extend your app in numerous ways, all depending on what you want to do. Some opinionated templates also exist, such as Vitesse by Anthony Fu of the Vue core team, that provide additional built-in functionality.

Taking that into consideration, Vite can be used for:

Single-page applications: This is the default when starting a Vite app. The final build will be a standard SPA using Rollup that can be deployed to Netlify or any other provider that supports this type of application.
Server-side Rendering: While it doesn't come built in or as a template, the documentation explains how to use Vite for SSR. Note that it is described as experimental. There is also a plugin that provides this functionality.
Static Site Generation: Want a static site? There's a plugin for Vue that does exactly that. See it in action!
Backend Integration: If you're building a site with a backend framework such as Rails or Laravel, you may want a more complete integration between the two development environments. Vite provides documentation on how to do just that.

Comparisons

As Evan noted, Vite is the foundation for Vue tooling going forward. At Vue Contributor Days, Evan noted that, "putting new developers through webpack doesn't feel like the ideal experience for a progressive framework." So how does it compare to existing solutions?

Keep in mind that Vite is a development environment, not a framework. The closest true comparisons to Vite are tools like Snowpack or WMR from the Preact team. The Vite site has a complete writeup on comparisons with other build tools. Rather than focusing on build tools, let's compare Vite with existing ways to build applications.

Vue CLI/Create React App (webpack-based SPA)

We've already touched on Vue CLI and Create React App, but it's important to point out that Vite is, first and foremost, a development environment and build tool. In the end, it will build a single-page application, just like existing tools. The main benefit to Vite is the plugin ecosystem and the next-generation tooling. If you're comfortable with webpack, then that's fine!

As an aside, at Vue Contributor Days, Evan and the panel talked about the potential for integrating Vite into existing tools such as Vue CLI, and leveraging it for other uses such as Nuxt or Ionic. I strongly encourage listening to it when you have a moment.

Nuxt/Next.js (Server-Side Rendered apps)

While Vite can provide SSR, it is still in an experimental state, and not recommended for production. If you are needing server-side rendering in your application, it's probably best to stick with the existing tooling for that.

That said, there's some work going on at Nuxt to provide Vite for your local development environment. Here's an experimental plugin for integrating Vite into Nuxt 2, with a polished version of this planned for Nuxt 3 later this year.

Gatsby (Static Site Generators)

This one really depends on the kind of website that you're building. Gatsby (and other SSG tools like 11ty, Gridsome, etc) provides plugins to integrate with headless CMS platforms like Contentful or Sanity.io, as well as ways to manage image assets, RSS feed generation, and other features of blogs or documentation sites.

Vite, by comparison, provides none of that for you out of the box. What it can provide is excellent tooling for building a simple site, and generate static assets. We already see that in the Vue ecosystem, both with the SSG plugin mentioned above as well as VitePress, which can provide a fast-loading documentation site (or any other static site you want).

Conclusion

As a build tool, Vite is still fairly new. However, it has already proven itself to be a fast development environment, leveraging modern tooling and language features to provide an excellent developer experience. While it may not replace existing tooling such as Vue CLI for some time, Evan has decided that it is the way forward for Vue tooling. Its fast uptime and vibrant community will only grow with time.

Next time you need to spin up a quick app in Vue or React, try using Vite for yourself! I look forward to see what you think!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Lindsay Wardell
Lindsay is a software engineer at This Dot Labs, and a host on the podcast Views on Vue. She loves learning about new languages and tools, and sharing that knowledge with the community.
@lindsaykwardell @lindsaykwardell

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

The HTML Dialog Element: Enhancing Accessibility and Ease of Use Dialogs are a common component added to applications, whether on the web or in native applications. Traditionally there has not been a standard way of implementing these on the web, resulting in many ad-hoc implementations that don’t act consistently across different web applications. Often, commonly expected features are missing from dialogs due to the complexity of implementing them. However, web browsers now offer a standard dialog element. Why use the dialog element? The native dialog element streamlines the implementation of dialogs, modals, and other kinds of non-modal dialogs. It does this by implementing many of the features needed by dialogs for you that are already baked into the browser. This is helpful as it reduces the burden on the developer when making their applications accessible by ensuring that user expectations concerning interaction are met, and it can also potentially simplify the implementation of dialogs in general. Basic usage Adding a dialog using the new tag can be achieved with just a few lines of code. ` However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it. ` Then if you want to close it you can call the .close() method on the dialog, or press the escape key to close it, just like most other modals work. Also, note how a backdrop appears that darkens the rest of the page and prevents you from interacting with it. Neat! Accessibility and focus management Correctly handling focus is important when making your web applications accessible to all users. Typically you have to move the current focus to the active dialog when showing them, but with the dialog element that’s done for you. By default, the focus will be set on the first focusable element in the dialog. You can optionally change which element receives focus first by setting the autofocus attribute on the element you want the focus to start on, as seen in the previous example where that attribute was added to the close element. Using the .showModal() method to open the dialog also implicitly adds the dialog ARIA role to the dialog element. This helps screen readers understand that a modal has appeared and the screen so it can act accordingly. Adding forms to dialogs Forms can also be added to dialogs, and there’s even a special method value for them. If you add a element with the method set to dialog then the form will have some different behaviors that differ from the standard get and post form methods. First off, no external HTTP request will be made with this new method. What will happen instead is that when the form gets submitted, the returnValue property on the form element will be set to the value of the submit button in the form. So given this example form: ` The form element with the example-form id will have its returnValue set to Submit. In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted. You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog. In this case, you can call event.preventDefault() in the submit event listener like so: ` Once your desired response comes back from the server, you can close it manually by using the .close() method on the dialog. Enhancing the backdrop The backdrop behind the dialog is a mostly translucent gray background by default. However, that backdrop is fully customizable using the ::backdrop pseudo-element. With it, you can set a background-color to any value you want, including gradients, images, etc. You may also want to make clicking the backdrop dismiss the modal, as this is a commonly implemented feature of them. By default, the <dialog> element doesn’t do this for us. There are a couple of changes that we can make to the dialog to get this working. First, an event listener is needed so that we know when the user clicks away from the dialog. ` Alone this event listener looks strange. It appears to dismiss the dialog whenever the dialog is clicked, not the backdrop. That’s the opposite of what we want to do. Unfortunately, you cannot listen for a click event on the backdrop as it is considered to be part of the dialog itself. Adding this event listener by itself will effectively make clicking anywhere on the page dismiss the dialog. To correct for this we need to wrap the contents of the dialog content with another element that will effectively mask the dialog and receive the click instead. A simple element can do! ` Even this isn’t perfect though as the contents of the div may have elements with margins in them that will push the div down, resulting in clicks close to the edges of the dialog to dismiss it. This can be resolved by adding a couple of styles the the wrapping div that will make the margin stay contained within the wrapper element. The dialog element itself also has some default padding that will exacerbate this issue. ` The wrapping div can be made into an inline-block element to contain the margin, and by moving the padding from the parent dialog to the wrapper, clicks made in the padded portions of the dialog will now interact with the wrapper element instead ensuring it won’t be dismissed. Conclusion Using the dialog element offers significant advantages for creating dialogs and modals by simplifying implementation with reasonable default behavior, enhancing accessibility for users that need assistive technologies such as screen readers by using automatic ARIA role assignment, tailored support for form elements, and flexible styling options....

Oct 25, 2024

4 mins

HTMLJavaScript

Styling Vue Single-File Components

Introduction If you have any experience with writing Vue single-file components, you have probably spent some time writing CSS within your component. Single-File Components allow developers to group code together in more logical ways, rather than breaking up components by language utilized (HTML, CSS, or JavaScript). Being able to group component styles directly next to the HTML that it applies to is one of the major benefits of Vue, including the ability to scope CSS to the component so that it doesn't affect other parts of the UI. However, there are a number of features to Vue's CSS integration that you may not be familar with, such as applying styles directly to slotted elements, or the newest features available in Vue 3.2. Let's explore some of these other ways of styling Vue single-file components, and how they can benefit your applications. Scoped Styles Let's start with the most common usage of CSS in Vue: scoped styles. One of the difficulties on writing modern applications is that our CSS files begin to grow larger and larger, until nobody really knows where certain styles are used or what a given change might affect. This can lead to copying certain CSS selectors, and simply duplicating them for each component. There are other solutions for this (such as BEM or utility classes), but when working with a component-based framework like Vue, it makes a lot of sense to group CSS classes within the component. Scoped styles allows us to write CSS that only applies to the component we are working in. Here's an example from the Vue docs: ` With this, the example class will only ever apply within this component. This is achieved by added a unique data attribute to all elements within the component, so the normal CSS cascade is still applied. External styles can still impact the design of this component, but its scoped styles cannot leak out to other components. Deep Styles This leads to an interesting problem. If our component's styles are scoped, what about children components? By default, they would not receive any styling from our scoped styles. However, Vue provides a way to do that. Let's look at an example below. ` By using the :deep() pseudo class, we are able to tell Vue that this particular class (.card-title) should not be scoped. Because the special ID is still applied to the root element (header), the style is still scoped, but it is available for any child component beneath it. Slotted Styles A problem I've run into in many situations is that I have a component being injected with slots, but I cannot control the styling of it like I want. Vue provides a solution for this as well with slotted styles. Let's review the above example, but this time we'll add a slotted style to our Title.vue component. ` Here, we added the :slotted pseudo class, so that any slotted h1 tags have the correct style applied to them. This may be a contrived example, but consider needing to have different header styles for each header tag (or equivalent CSS class). The Title.vue component can manage all of these styles, rather than relying on the consumer of these components to pass in the correct class or styling. Global Styles Of course, sometimes you need to apply styles globally, even within a scoped component. Vue provides us with two different ways to handle this: the :global pseudo selector and multiple style blocks. :global Within a scoped style block, if you only need to provide one class as a global value, you can use the :global pseudo selector to note that the style should not be scoped. From the Vue docs: ` Multiple style blocks There is also nothing stopping you from having multiple style blocks within your Vue component. Simply create another tag, and put your global styles in there. ` Style Modules If you're coming from React, you may be more familiar with CSS modules, where you import a CSS file and access its classes as a JavaScript object. The same can be done within Vue by using instead of . Here's an example from the Vue docs: ` This can be particularly nice to work with, so that you aren't passing strings around in your classes (which are prone to errors and typos). Vue also allows you to rename what the object is, so that you don't need to access them with $style in your template if you don't want to. Dynamic CSS Values The latest feature in Vue is state-driven dynamic CSS values. There is a trend in modern CSS to use custom properties as a way to dynamically update the value of some CSS property. This can allow our CSS to be more flexible, and interact nicely with our other application code. Let's look at an example component that renders a progress bar: ` This component takes in a number (progress), then both displays that number and updates a CSS custom property with the value. As the progress changes, the CSS property is continually updated to stay in sync with the JavaScript value. In Vue 3.2, however, we are provided with a special CSS function that does this whole thing for us! Take a look at the updated code: ` By using v-bind(props.progress), we have elimited the need for our custom watcher, and it's clear that our CSS is being kept in sync with the value of props.progress. Under the hood, Vue is doing the same thing for us with a custom property, but it's so much nicer than having to write it ourselves. Conclusion CSS is a complicated language in practice, and mixing it with JavaScript makes things even more complex. Vue provides developers with the tools to handle CSS in a reliable and predictable way, which encourages building in a component-based architecture. Next time you're running into trouble with CSS in Vue, see if one of these techniques can be useful to you!...

Nov 4, 2021

4 mins

VueWeb Development

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

In this episode of Leadership Exchange, host Rob Ocel chats with Jerry Reghunadh, Senior Director of Enterprise Architecture at Data Nimbus, about leadership, AI adoption, and data-driven decision-making. Jerry shares his career journey, insights on leveraging tools like ChatGPT and Copilot, and strategies for building effective data pipelines. They explore how companies can avoid "analysis paralysis," adopt AI strategically, and evaluate new technologies to solve real-world problems. Tune in for practical advice on aligning innovation with business goals and staying competitive in a rapidly evolving tech landscape. Chapters 00:00 – Introduction 00:31 – Jerry’s Leadership Journey 02:01 – Discussing AI in Leadership 03:59 – Experimenting with AI Tools 06:24 – Overcoming Analysis Paralysis 09:18 – Importance of Early AI Adoption 13:12 – AI’s Impact on Efficiency 14:30 – Sponsor Message 16:26 – Setting Realistic Goals for AI 19:41 – Data Management and AI 23:09 – Is AI Just a Fad? 27:22 – Testing New Technologies 29:56 – Final Thoughts on AI 30:25 – Connect with Jerry 30:44 – Closing Remarks 31:20 – Outro Follow Jerry on Social Media Linkedin: https://www.linkedin.com/in/jerrymannel/ Sponsored by This Dot: thisdot.co...

Nov 18, 2024

1 min

AIEngineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Introduction to Vite - Next Generation Frontend Tooling

Introduction

Vite - Next Generation Frontend Tooling

Getting Started

Configuration and Plugins

Why Use Vite?

Comparisons

Vue CLI/Create React App (webpack-based SPA)

Nuxt/Next.js (Server-Side Rendered apps)

Gatsby (Static Site Generators)

Conclusion

Lindsay Wardell

You might also like

Learning Paths for Next.JS Developers with Ankita Kulkarni

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Styling Vue Single-File Components

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

You might also like

Learning Paths for Next.JS Developers with Ankita Kulkarni

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Styling Vue Single-File Components

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh