Modern Vue.js Development with Vite: Best Practices and Tips
Vue.js + Vite — Tips and Tricks
Vue.js is a progressive JavaScript framework for building user interfaces, and Vite is a next-generation front-end build tool that significantly improves the development experience.
Together, they offer a powerful combination for modern web development. What’s even better is that Bit now supports Vue app development in Vite.
This integration further enhances the development experience, providing a smoother and more efficient workflow.
Therefore, this article will explore some best practices and tips to boost your productivity and efficiency as a Vue developer on Bit.
But, before going into the details, all of the tips will be introduced through a real existing app on Bit Cloud called TodoMVC.
Tip 1: Set up your Bit component as a Vite app
Bit has published an app type called “Vue Vite app type”. This can get your Vue app running with Vite out-of-box. To apply it to your Vue application, follow these steps:
First, Install the Vue Vite app type:
bit install @bitdev/vue.app-types.vue-vite-app-typeThen, create index.html for your app and connect your further app implementation:
<!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>Finally, create a bit-app file app-vite.bit-app.ts as the app config and import the app type:
import { VueApp } from '@bitdev/vue.app-types.vue-vite-app-type';
export default VueApp.from({
name: "todomvc-vite",
});Now you can run the new app and open your browser to preview:
# register the new app on the workspace
bit use app-vite
# run the new app with the name we setup
bit run todomvc-vite
# open <http://localhost:3000/> to preview
Tip 2: Use dotenv files to customize local variables
Dotenv (.env) files are a common way to manage environment variables in a development environment. They are simple text files that store key/value pairs, which can be used to customize certain aspects of your application.
To use dotenv files in your Vue application with Vite, simply create a .env file in your app and add your desired variables. Vite will automatically load these variables and make them available in your app.
For example, the data of the TodoMVC app is stored in local storage with a default key vue-todomvc. You can see the data is stored as this key in dev tools.
Now let’s set the key via an environment variable.
First, let’s create a .env file and add a key with VITE_ prefix
VITE_STORAGE_KEY="my-vite-todomvc"Now, you can access this variable in the source code via import.meta.env.VITE_STORAGE_KEY.
Second, find the code which specifies the local storage key to save data. It’s inside app-vite.init.ts line 10:
const STORAGE_KEY = "vue-todomvc";Let’s change it to:
const STORAGE_KEY = import.meta.env.VITE_STORAGE_KEY || "vue-todomvc";Now open the dev tools again, and the data is stored as key my-vite-todomvc instead.
For more about dotenv files in Vite, check this out.
Tip 3: Add custom Vite config
Vite also allows you to customize its configuration to fit your project’s needs better. You can simply create a vite.config.ts or vite.config.js file to achieve that.
For instance, you might want to set a custom base URL for your application. Now, let’s create a vite.config.ts file and add the base property with value /my-vite-todomvc-app/.
import { defineConfig } from 'vite'
export default defineConfig({
base: '/my-vite-todomvc-app/'
})Now you can see the URL of your app has become http://localhost:3000/my-vite-todomvc-app/
For more about configuring Vite, see this in-depth guide.
Tip 4: Use the new Vue Dev Tools for better Vue development
The Vue Devtools is a powerful tool for debugging Vue applications. It provides a wealth of information about your app and makes identifying and resolving issues easier.
Recently, it released the next version https://devtools-next.vuejs.org/.
Adding it as a Vite plugin can significantly improve your development workflow:
First, install the Vue DevTools:
bit install vite-plugin-vue-devtoolsThen, add this new DevTools into vite.config.ts as a Vite plugin:
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
base: '/my-vite-todomvc-app/',
plugins: [
VueDevTools()
]
})Then, re-run the application and see the DevTools running through the terminal log. And you can access it via http://localhost:3000/my-vite-todomvc-app/__devtools__/. This allows you to inspect your Vue components and application structure and perform other debugging tasks more efficiently.
For more about Vue DevTools, see https://devtools-next.vuejs.org/guide/features.
Tip 5: Easily deploy your application to the cloud
Deploying your Vue application to the cloud can make it accessible to users worldwide. You can easily achieve that on Bit.
Let’s take Netlify as an example for deploying our TodoMVC. Netlify is a cloud platform offering hosting and serverless services.
First, use this link to sign up for a Netlify account and apply for an access token.
Next, install the Bit Deployer for Netlify:
bit install @teambit/cloud-providers.deployers.netlifyThen, add the deploy function to your application config file app-vite.bit-app.ts
import { VueApp } from '@bitdev/vue.app-types.vue-vite-app-type';
import { Netlify } from '@teambit/cloud-providers.deployers.netlify';
const netlifyConfig = {
// The slug of your Netlify profile.
team: '<your-slug>',
// The access token of your Netlify profile.
accessToken: process.env.NETLIFY_AUTH_TOKEN || '',
// The name of the site to deploy to when bit tag.
productionSiteName: '<your-site-name>',
// The name of the staging site to deploy to when bit snap. (optional)
stagingSiteName: '<your-staging-site-name>',
};
export default VueApp.from({
name: "todomvc-vite",
deploy: Netlify.deploy(netlifyConfig),
});Now, you can run bit snap or bit tag to build your app and publish it to the staging or production environment.
For example this is the app that I deployed on to Netlify: https://staging-todomvc-app-vue-bit.netlify.app/
Further Suggestions: Dive into the Bit and Vue Ecosystem
Here are some resources that we recommend to explore:
1. Volar: a Language Support plugin built specifically for Vue 3.
2. VueUse: a collection of essential Vue Composition APIs.
3. Pinia and Vue Router: official state management and routing support for Vue applications.
4. Bit’s VSCode Extension: Improves your component development experience with enhanced productivity features and integrated VS Code Source Control support.
Conclusion
These best practices and tips above could help you to enhance your development workflow and boost your productivity.
The key to mastering Vue and Vite lies in continuous learning and practice.
Take advantage of the resources available in the Bit and Vue ecosystem, and don’t be afraid to experiment and share your insights with the community.
Happy coding!
