DEV Community

Cover image for How to Share Vue Components Between Applications
Eden Ella
Eden Ella

Posted on • Originally published at blog.bitsrc.io

How to Share Vue Components Between Applications

#vue #webdev #design #javascript

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:

  1. Signing up to Bit and creating a collection for our shared components

  2. Cloning a demo project from Github

  3. Installing Bit and initializing a workspace

  4. Exporting components from an existing project

  5. Importing components to a new project

  6. Updating components and exporting them back to Bit’s cloud

  7. 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:
https://github.com/teambit/vue-demo-app

$ git clone https://github.com/teambit/vue-demo-app
$ cd vue-demo-app
$ npm install
Enter fullscreen mode Exit fullscreen mode

Install Bit and initialize a workspace

Install Bit CLI on your machine using npm:

$ npm install bit-bin -g
Enter fullscreen mode Exit fullscreen mode

Log in to your account (via the CLI)

$  bit login
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

You should receive a message stating:

successfully initialized a bit workspace.
Enter fullscreen mode Exit fullscreen mode

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/*
Enter fullscreen mode Exit fullscreen mode

You should receive a message stating:

tracking 4 new components
Enter fullscreen mode Exit fullscreen mode

To make sure Bit tracks our components with no errors or issues that need to be resolved, type in:

$ bit status
Enter fullscreen mode Exit fullscreen mode

You should expect to see the following message:

 > h1 ... ok
 > todo-input-controls ... ok
 > todo-list ... ok
 > todo-list-item ... ok
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Stage (tag) and export your components

When tagging a component, three things happen:

  1. The component’s test will be run

  2. The component will get compiled

  3. 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
Enter fullscreen mode Exit fullscreen mode

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)
     > h1@1.0.0
     > todo-input-controls@1.0.0
     > todo-list@1.0.0
     > todo-list-item@1.0.0
Enter fullscreen mode Exit fullscreen mode

We’re now ready to export our components to our new collection:

bit export <username>.<collection>
Enter fullscreen mode Exit fullscreen mode

For example:

bit export bit.vue-demo-app
Enter fullscreen mode Exit fullscreen mode

You should expect to see in your terminal, something similar to:

exported 4 components to scope bit.vue-demo-app
Enter fullscreen mode Exit fullscreen mode

Your components are now available to be shared and reused in your collection in Bit’s cloud.

Go to 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
Enter fullscreen mode Exit fullscreen mode

Let’s create a new Vue project and name it ‘new-project’:

$ vue create new-project
Enter fullscreen mode Exit fullscreen mode

We’ll choose the default setup — Babel and ESLint:

? Please pick a preset: default (babel, eslint)
Enter fullscreen mode Exit fullscreen mode

Great!

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then, import our ‘TodoInputControls’ component from our collection.

$ bit import <username>.<collection>/todo-input-controls
Enter fullscreen mode Exit fullscreen mode

for example:

bit import bit.vue-demo-app/todo-input-controls
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>/todo-input-controls@1.0.1
Enter fullscreen mode Exit fullscreen mode

Let’s export our modified component:

$ bit export <username>.<collection>
Enter fullscreen mode Exit fullscreen mode

You should receive a message stating:

exported 1 components to scope <username>.<collection>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

or, we can simply fetch all outdated components

$ bit import
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

That’s all! 😃

Conclusion

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)

Read next

abhay_yt_52a8e72b213be229 profile image

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat -

apollotoday profile image

Deploying Next.js + Pocketbase to a single Fly.io machine

Nick -

abhay_yt_52a8e72b213be229 profile image

Why TypeScript is the Future of JavaScript Development: Benefits and Adoption

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Boost Your Web App's Speed: JavaScript Performance Optimization Techniques

Abhay Singh Kathayat -