Vue Components

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

$bit new vue my-workspace --env bitdev.vue/vue-env

Copied

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

The unique part of this generated workspace includes:

• tsconfig.json and types/types.d.ts for Vue & TypeScript support in IDEs.
• "teambit.generator/generator": { "envs": ["bitdev.vue/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 them on.

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

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

$bit create vue ui/my-counter

Copied

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>
Copied

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>
Copied

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 };
Copied

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).

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();
});
Copied

Also see Testing docs for more information.

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 install @vueuse/core

Copied

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>
Copied

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.

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>
```
Copied

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