Learn how to easily share Vue components between different projects, sync changes, and build faster using Bit.
Bit is a tool and platform for collaborating on individual Vue components across projects/repositories. If you’re not already familiar with Bit, you can read more about it here.
In this tutorial, we will walk through the main steps of sharing and consuming Vue components with Bit. This will include:
Signing up to Bit and creating a collection for our shared components
Cloning a demo project from Github
Installing Bit and initializing a workspace
Exporting components from an existing project
Importing components to a new project
Updating components and exporting them back to Bit’s cloud
Importing the updated component into our original project
Sign up and create a collection
Head over to Bit and create your account. Enter a username and password, or simply use your Github account.
Now that you’re a member, create a collection to store your future shared components using the top-right ‘New’ button. Choose between a private collection, for you and your invitees only, or a public collection to be viewed and used by the entire open-source community.
Clone a demo app
We need a demo project to really get our hands dirty.
Clone and install this demo to-do app:
$ git clone https://github.com/teambit/vue-demo-app $ cd vue-demo-app $ npm install
Install Bit and initialize a workspace
Install Bit CLI on your machine using npm:
$ npm install bit-bin -g
Log in to your account (via the CLI)
$ bit login
This will open up your browser and log in to your account. We are now ready to start using Bit.
Initialize a workspace
To start working with Bit on our newly-cloned project, initialize a workspace by typing into your terminal (in your projects root folder):
$ bit init
You should receive a message stating:
successfully initialized a bit workspace.
Export our project’s Vue components
Track new components
Our project is made of single-file components. Each component occupies one and only one .vue file - this sort of architecture is not mandatory but is highly advisable.
We can tell Bit to track all our components (located in the ‘components’ library) with a single command:
$ bit add src/components/*
You should receive a message stating:
tracking 4 new components
To make sure Bit tracks our components with no errors or issues that need to be resolved, type in:
$ bit status
You should expect to see the following message:
> h1 ... ok > todo-input-controls ... ok > todo-list ... ok > todo-list-item ... ok
If any component has dependency graph issues, click here to learn how to resolve them.
Configure a compiler
Encapsulating components together with their compilers give us the freedom to use, build and test them anywhere. This includes running them in the cloud to enable features such as Bit’s live component playground (see an example).
This is done using pre-made Bit compilers that can be imported into your project’s workspace. You only need to do this once, and it can apply to all current and future components you share from it.
To configure our Vue compiler, type into your terminal:
$ bit import bit.envs/bundlers/vue --compiler
Stage (tag) and export your components
When tagging a component, three things happen:
The component’s test will be run
The component will get compiled
All future modifications to this component will not affect this component version
To tag all our tracked components we add the — all flag:
$ bit tag --all 1.0.0
Specifying a version number is not mandatory — you can leave it to Bit (in which case, patch number will automatically increase on each new tag)
After entering your tag command, you should see in your terminal:
4 component(s) tagged (use "bit export [collection]" to push these components to a remote") (use "bit untag" to unstage versions) new components (first version for components) > email@example.com > firstname.lastname@example.org > email@example.com > firstname.lastname@example.org
We’re now ready to export our components to our new collection:
bit export <username>.<collection>
bit export bit.vue-demo-app
You should expect to see in your terminal, something similar to:
exported 4 components to scope bit.vue-demo-app
Your components are now available to be shared and reused in your collection in Bit’s cloud.
https://bit.dev/<username>/<collection> (or check out my own collection on https://bit.dev/bit/vue-demo-app/ to see them rendered live in Bit’s playground. You can also write examples, showing how each component could be used. With Bit’s component-hub UI and search engine, discovering components is easier than ever.
Import a component to a new project
Create a new Vue project using vue-cli
If you don’t have Vue-CLI installed on your machine, type into your terminal:
npm install -g @vue/cli
Let’s create a new Vue project and name it ‘new-project’:
$ vue create new-project
We’ll choose the default setup — Babel and ESLint:
? Please pick a preset: default (babel, eslint)
Now, let’s say our new project needs an input-field-and-a-button component, just like the one we had in our previous project (‘TodoInputControls.vue’). We can either choose to install it in its built form, using NPM or Yarn, just like any other
$ npm i @bit/<username>.<collection>.todo-input-controls
or we may choose to not only use it but also modify it and even export it back to our collection. Let’s give it a try.
First, we need to initialize a new Bit workspace (in our new project’s root directory)
$ bit init
Then, import our ‘TodoInputControls’ component from our collection.
$ bit import <username>.<collection>/todo-input-controls
bit import bit.vue-demo-app/todo-input-controls
After completion, this message should appear:
successfully imported one component - added <username>.<collection>/todo-input-controls new versions: 1.0.0, currently used version 1.0.0
Our imported component is now located under the newly created ‘components’ library (located in our root folder — not our src folder).
├───.git ├───components │ ├───todo-input-controls
Let’s open our (.vue) source code inside the ‘todo-input-controls’ directory and make a small change before exporting it back as a new version.
For example, say we want to modify our button so that it would be disabled not only when the input field is empty but also when it has nothing but whitespaces.
This is how our button looks before our modification:
This is how it looks after our change:
Great. We’re done with our updates.
Let’s export our component back to our collection.
Our component is an imported component. That means it is already tracked and handled by Bit. That makes two steps in our export workflow redundant: adding a component to Bit’s list of tracked components (bit add) and configuring a compiler (bit import bit.envs/bundlers/vue --compiler).
When a component is tracked by Bit, it is given its own ID. To get the full list of tracked components, type in:
$ bit list
In our case, we have only a single tracked component.
Let’s see what Bit outputs back to us:
As expected, we have a single-row table with our tracked component in it.
We can use our component’s ID to tell Bit to tag it before exporting it back. This time we’ll let Bit decide on a new version number.
$ bit tag <username>.<collection>/todo-input-controls
We should expect to see this notification:
1 component(s) tagged (use "bit export [collection]" to push these components to a remote") (use "bit untag" to unstage versions) changed components (components that got a version bump) > <username>.<collection>/email@example.com
Let’s export our modified component:
$ bit export <username>.<collection>
You should receive a message stating:
exported 1 components to scope <username>.<collection>
Import the updated components into our original project
Let’s open our previous project and import the updated component from our collection.
Check for remote changes
Remember $ bit list? Let’s add a flag to that, to check for outdated components in our current project.
$ bit list --outdated
You should see this table in your console:
Fetch all outdated components
We can fetch the latest release of a specific component
$ bit import <userbame>.<collection>/todo-input-controls
or, we can simply fetch all outdated components
$ bit import
You should expect to see:
successfully imported one component - updated bit.vue-demo-app/todo-input-controls new versions: 1.0.1 Edens-MacBook-Pro:vue-demo-app eden$ bit status modified components (use "bit tag --all [version]" to lock a version with all your changes) (use "bit diff" to compare changes) > todo-list ... ok
That’s all! 😃
In this tutorial, we’ve seen how easy it is to share and collaborate on individual Vue components. Thanks to Bit, the borders of our project’s repository do not mark the borders of collaboration.
Top comments (0)