Bit in an existing Vue project

Using Bit in an exsisting Vue project allows you to manage independnetly versioned and released Vue components, hooks and more in the same repository as any Vue project. This means you can quickly share them as Bit Components with any other project.
You can also build non-Vue components, like modules, entities or any JavaScript/TypeScript based functionality you deem reuseable.

To use Bit in an existing Vue repository and run:

bit init
Copied

You will be prompted to answer a few questions:

1. Which environment you will like to use? pick the most relevant default stack (you can add more later).
2. Would you like to use your own package manager? Yes.
3. Would you like to use MCP server for AI-powered development? Yes.
4. Which IDE to set up? Select from list (you can add more later).

The output should be the following:

🔧 Setting up MCP server for vscode...
✅ MCP server configured for vscode
successfully initialized a bit workspace.

ℹ️  Additional Information:
📁 Components will be created in: bit-components/{scope}/{name}
📖 For CI/CD setup, visit: https://bit.dev/docs/getting-started/collaborate/exporting-components#custom-ci/cd-setup
🎯 Environment: bitdev.react/react-env
🤖 MCP server configured for: vscode
📦 External package manager mode enabled
💡 Run pnpm install (or yarn install/npm install) to install dependencies
Copied

You have successfully added Bit support to your Turborepo workspace!
See the two generated file; workspace.jsonc, which includes all Bit related configuration, and .bitmap which tracks the Bit components in the workspace. Make sure to add and commit these files to your repository.

Now that you have Bit in your Vue repository, you can run any Bit commands to manage components:

bit templates // see all available templates you can use
bit create    // create a new component
bit start     // start the bit local dev-server
bit list      // list all components in the workspace
...
Copied

All components are linked to the local node_modules. In you need to use a Bit component in your Vue app, use the module link:

import { anotherBitComponent } from '@my-org/my-scope/another-bit-component';
Copied

To ensure the compiled outputs of components is up-to-date in node_modules, you need to run one of the following processes:

bit watch // runs component-compilation in a watch mode, ensure compiled node-modules for components are up-to-date
bit start // runs bit-devserver which also ensures compiled node-modules for components are up-to-date
Copied

With Bit you can create additional apps in your Vue repository.
To create a new app, simply choose the vue-app template when creating a new component:

bit create vue-app apps/my-vue-app
Copied

Then add it to your workspace.jsonc configuration with the bit use command:

bit use apps/my-vue-app
Copied

Now you can use the following application-workflow commands:

bit app list    // lists all available Bit apps in the repotisory
bit run <name> // runs a Bit app in a seperate dev-server, alongside your app
Copied

Note - You can run any type of App you want, not just Vue. To do so, you just need to add the specific framework plugin to your workspace.jsonc file, similar to how you added bitdev.react/react-env.

A Bit component is isolated from the build of the repository it is in, which means you can manage components of different types. For example, you can add Angular or React components to be built alongside your Vue components, if you so please.
To do so, you only need to include additional plugins to the workspace:

bit install bitdev.angular/angular-env
Copied

And add to workspace.jsonc:

{
  "teambit.generator/generator": {
    "envs": ["bitdev.vue/vue-env", "bitdev.angular/angular-env"]
  }
}
Copied

note - this does not mean you can use components of different framework in the same app. for this there are other tools and practices to adopt, like MFE.

See the docs here about adding the relevant CI script package.