Vue Components

Run the following to create a workspace for your Vue components:

$bit
Copiedcopy
See command synopsis

The generated workspace includes workspace-level configuration and some other configuration files for your IDE.

The only unique part of this generated workspace is:

  • "teambit.generator/generator": { "envs": ["org.scope-name/envs/my-vue-env"] } in workspace.json for creating new components without specifying the env aspect manually.

If your workspace was generated in other ways, you can still manually add it on.

To learn how to initialize a Bit workspace on an existing project, see Add Bit to an existing project.

Create a Vue component

Run the following to create a component using your env's vue template:

$bit
Copiedcopy
See command synopsis
Component compilation

Run Bit's development server (bit start) or watch mode (bit watch) to compile modified components.

Implementation file

The main implementation file is my-counter.vue, which is a Vue Single File Component (SFC). You can modify it to your needs.

<!-- @filename: my-counter.vue -->

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: "",
  },
});

const count = ref(0);
</script>

<template>
  <button @click="count++">
    {{ title }}: {{ count }}
  </button>
</template>

<style scoped>
button {
  color: blue;
}
</style>
CopiedCopy

Compositions

Verify that your component behaves as expected by rendering it in various relevant contexts and variations. For example, you can see another file named my-counter-basic.fixtures.vue as a basic composition which passes "Hello World" to the prop title.

<!-- @filename: my-counter-basic.fixtures.vue -->

<script setup>
import MyCounter from "./my-counter.vue";
</script>

<template>
  <MyCounter title="Hello World" />
</template>
CopiedCopy

And this file is gathered and exported by my-counter.composition.ts.

// @filename: my-counter.composition.ts

import BasicMyCounter from "./my-counter-basic.fixtures.vue";

export { BasicMyCounter };
CopiedCopy

You can add other compositions by aurhoring additional components in *.fixtures.vue and exporting them from my-counter.composition.ts or other *.composition.* files.

Head to the component's 'Compositions' tab, to see your rendered compositions (run bit start if you don't have the workspace UI running, already).

Tests

Head over to your component's .spec.ts file to add automated testing. We recommend using your compositions as the base for your testings, with Vue Testing Library as the test utils.

For example:

// @filename: my-counter.spec.ts

import { render } from "@testing-library/vue";
import { BasicMyCounter } from "./my-counter.composition";

it("should render with the correct text", () => {
  const { getByText } = render(BasicMyCounter);
  const rendered = getByText(/Hello World/);
  expect(rendered).toBeTruthy();
});
CopiedCopy

Also see Testing docs for more information.

Use a dependency

To use a dependency, whether it's a component or a package, install it in your workspace, and import it into your component's files (components maintained in the same workspace do not need to be installed, but are consumed via their package name, nonetheless). For example, the following installs VueUse:

$bit
Copiedcopy
See command synopsis

Import a Vue composable into your component's files:

<!-- @filename: my-counter.vue -->

<script setup lang="ts">
import { useCounter } from "@vueuse/core";

defineProps({
  title: {
    type: String,
    default: "",
  },
});

const { count, inc } = useCounter();
</script>

<template>
  <button @click="inc()">
    {{ title }}: {{ count }}
  </button>
</template>

<style scoped>
button {
  color: blue;
}
</style>
CopiedCopy

To use this component as a dependency of another component, run bit show ui/my-counter to see its package name. Use the package name to import it into other components.

Documentation

You can modify my-counter.docs.md to document your component's API and usage. To learn Markdown syntax, see Markdown Guide.

For example:

---
description: A my-counter component.
---

A component that does something special and renders text in a div.

### Component usage

```vue
<template>
  <MyCounter title="Hello World!" />
</template>
```
CopiedCopy

Collaborate

Snap your component and export it to its remote scope, to enable others to consume it and collaborate on it.