DOCSEARCHbyAlgolia
Submit Docs

Vue Bits

repository·main·Indexed 26 days ago

https://github.com/davidhdev/vue-bits

A library of over 90+ animated VueJS UI components, including text animations, backgrounds, and interactive elements. Designed as the official Vue port of React Bits, it integrates with Vue and Nuxt projects. Components can be installed individually via the jsrepo or shadcn CLI using the registry at https://vue-bits.dev/r.

Tokens
9.5K
Snippets
16
Records
27
Agent score
87%

What's inside vue-bits

  1. Overview of Vue Bits

    main
    Vue Bits is a large collection of animated VueJS UI components, serving as the official Vue port of React Bits. It provides over 90+ components including text animations, backgrounds, and general UI elements designed to be highly customizable via props and easy to integrate into modern Vue or Nuxt projects.

  2. Install Vue Bits components via CLI

    main

    Vue Bits uses jsrepo to install individual components into your project. Instead of installing a single monolithic package, you can use the CLI to add specific components as needed.

    To find the exact installation command for a specific component, visit the component's dedicated page in the official documentation at vue-bits.dev.

  7. Configure the vue-bits registry with jsrepo

    main

    To use vue-bits components with jsrepo, you must first initialize the registry in your project. Point jsrepo init to the REGISTRY_BASE URL. After initialization, you can add items using the jsrepo add command.

    Registry Base URL: https://vue-bits.dev/r

  8. Configure the @vue-bits registry via jsrepo.config.ts

    main

    The @vue-bits registry is configured using defineConfig from jsrepo. The configuration defines the registry's metadata, excluded dependencies, output formats, and the collection of components available in the registry.

    Key configuration properties within the registry object include:

    • name: The unique identifier for the registry (e.g., @vue-bits).
    • description: A summary of the registry's purpose.
    • excludeDeps: An array of dependencies to exclude from registry processing (e.g., ['vue']).
    • outputs: An array of output configurations that define how registry items are transformed and written to disk. This project uses @jsrepo/shadcn and a custom componentDependenciesOutput.
    • items: An array of RegistryItem objects representing the components available in the registry.
    import { output as shadcnOutput } from '@jsrepo/shadcn';
import { defineConfig, RegistryItem } from 'jsrepo';
import { componentDependenciesOutput } from './scripts/component-dependencies-output';

export default defineConfig({
  registry: {
    name: '@vue-bits',
    description: 'An open source collection of animated, interactive & fully customizable Vue components...',
    homepage: 'https://vue-bits.dev',
    authors: ['David Haz'],
    bugs: 'https://github.com/DavidHDev/vue-bits/issues',
    repository: 'https://github.com/DavidHDev/vue-bits',
    tags: ['vue', 'javascript', 'components', 'tailwind'],
    excludeDeps: ['vue'],
    outputs: [
      shadcnOutput({ dir: 'public/r', format: true }),
      componentDependenciesOutput({ path: 'src/constants/componentDependencies.ts' })
    ],
    items: [
      // Array of RegistryItem objects
    ]
  }
});

  9. Configure vue-bits in components.json for MCP/Multi-registry

    main

    For setups using a components.json file (common in MCP or multi-registry environments), add the @vue-bits namespace to your registries configuration. This allows the CLI to resolve components via the vue-bits registry.

    Configuration Object:

    {
  "registries": {
    "@vue-bits": "https://vue-bits.dev/r/{name}.json"
  }
}

  10. Use the ModelViewer component

    main

    The ModelViewer component allows you to render 3D models (such as .glb files) within a container. It supports props for url, width, height, and max-zoom-distance, and emits a @model-loaded event when the model is ready.

    <template>
  <div class="h-[400px]">
    <ModelViewer
      url="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/main/2.0/ToyCar/glTF-Binary/ToyCar.glb"
      width="100%"
      height="100%"
      :max-zoom-distance="0.7"
      @model-loaded="onModelLoaded"
    />
  </div>
</template>

<script setup lang="ts">
  import ModelViewer from './ModelViewer.vue';

const onModelLoaded = () => {
    console.log('Model loaded!');
  };
</script>

  11. Add a vue-bits snippet using jsrepo

    main

    You can add a specific component (snippet) to your project using the jsrepo add command. The command is constructed using your preferred package manager's runner (e.g., npx, pnpm dlx) followed by the registry URL for the specific component slug.

    Command Pattern: <runner> jsrepo add https://vue-bits.dev/r/<slug>.json

  12. Use the LiquidEther background component

    main

    The LiquidEther component provides a dynamic, interactive background effect. It requires the three package for its underlying 3D rendering.

    Installation

    npm install three

    Usage

    Import the component and pass configuration props to control colors, mouse interaction, and automatic animation settings. To ensure the background is visible, wrap it in a container with a defined width and height.

    <template>
  <div
    style="
      width: 100%;
      height: 600px;
      position: relative;
    "
  >
    <LiquidEther
      :colors="['#5227FF', '#FF9FFC', '#B497CF']"
      :mouse-force="20"
      :cursor-size="100"
      :is-viscous="false"
      :viscous="30"
      :iterations-viscous="32"
      :iterations-poisson="32"
      :resolution="0.5"
      :is-bounce="false"
      :auto-demo="true"
      :auto-speed="0.5"
      :auto-intensity="2.2"
      :takeover-duration="0.25"
      :auto-resume-delay="3000"
      :auto-ramp-duration="0.6"
    />
  </div>
</template>

<script setup lang="ts">
import LiquidEther from './LiquidEther.vue'
</script>