Frontend Development 10 min read

Boost Vue Development with Bit and Vite: 5 Practical Tips & Best Practices

This guide walks you through five actionable tips for integrating Bit with Vue and Vite, covering component setup, environment variable management, custom Vite configuration, Vue DevTools usage, and cloud deployment, all illustrated with clear code examples and screenshots.

Sohu Tech Products

Feb 28, 2024

Boost Vue Development with Bit and Vite: 5 Practical Tips & Best Practices

Set up a Vue Vite application with Bit

Bit provides a vue-vite-app-type that lets a Vue project run on Vite out of the box.

bit install @bitdev/vue.app-types.vue-vite-app-type

Create a minimal index.html that loads the entry file app-vite.root.ts:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My Todo App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- write your further implementation in `app-vite.root.ts` -->
    <script type="module" src="app-vite.root.ts"></script>
  </body>
</html>

Create the Bit app definition app-vite.bit-app.ts:

import { VueApp } from "@bitdev/vue.app-types.vue-vite-app-type";

export default VueApp.from({
  name: "todomvc-vite",
});

# Register the app
bit use app-vite
# Run the app (default port 3000)
bit run todomvc-vite
# Open http://localhost:3000/ to preview

Customize local variables with a .env file

Vite automatically loads variables prefixed with VITE_ from a .env file. VITE_STORAGE_KEY="my-vite-todomvc" Update the storage key in app-vite.init.ts (line 10) to use the environment variable:

const STORAGE_KEY = import.meta.env.VITE_STORAGE_KEY || "vue-todomvc";

Add custom Vite configuration

Create vite.config.ts (or .js) to adjust Vite settings, for example a custom base URL:

import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-vite-todomvc-app/",
});

The application will now be served at http://localhost:3000/my-vite-todomvc-app/.

Enable Vue DevTools for better debugging

Install the Vite plugin that bundles the new Vue DevTools: bit install vite-plugin-vue-devtools Add the plugin to vite.config.ts:

import { defineConfig } from "vite";
import VueDevTools from "vite-plugin-vue-devtools";

export default defineConfig({
  base: "/my-vite-todomvc-app/",
  plugins: [VueDevTools()],
});

After restarting the app, the DevTools UI is available at http://localhost:3000/my-vite-todomvc-app/__devtools__/ for component inspection and state debugging.

Deploy the application to Netlify using Bit’s Netlify Deployer

Install the Netlify deployer package:

bit install @teambit/cloud-providers.deployers.netlify

Configure deployment in app-vite.bit-app.ts. Replace the placeholder values with your own Netlify team slug, access token (provided via NETLIFY_AUTH_TOKEN), and site names:

import { VueApp } from "@bitdev/vue.app-types.vue-vite-app-type";
import { Netlify } from "@teambit/cloud-providers.deployers.netlify";

const netlifyConfig = {
  // Netlify team slug (e.g., "my-team")
  team: "YOUR_TEAM_SLUG",
  // Access token – usually supplied through an environment variable
  accessToken: process.env.NETLIFY_AUTH_TOKEN || "",
  // Site name for production builds
  productionSiteName: "YOUR_PRODUCTION_SITE_NAME",
  // Optional site name for staging builds
  stagingSiteName: "YOUR_STAGING_SITE_NAME",
};

export default VueApp.from({
  name: "todomvc-vite",
  deploy: Netlify.deploy(netlifyConfig),
});

Build and publish the component version with either bit snap (for a temporary snapshot) or bit tag (for a permanent version). The Netlify URL becomes publicly accessible.

References

Bit documentation: https://bit.dev/

Vue Vite app type: https://bit.cloud/bitdev/vue/app-types/vue-vite-app-type

Vite environment variables: https://vitejs.dev/guide/env-and-mode.html#env-files

Vite configuration guide: https://vitejs.dev/config/

Vue DevTools (next): https://devtools-next.vuejs.org/

Netlify documentation: https://www.netlify.com/

Bit Netlify Deployer: https://bit.cloud/teambit/cloud-providers/deployers/netlify

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.

frontend Deployment best practices Vue Bit Vite Environment Variables

Written by

Sohu Tech Products

A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.