Getting Started

Setting up cmd-bar in you vue/nuxt application is only a couple of steps away.

Play online

TODO: setup codesandbox/stackblitz You can start playing with Docus in your browser using Stackblitz:

Setup Vue

Install cmd-bar dependency to your project:

npm

npm install cmd-bar

Then you can import the CmdBar Compound Component in your project.

import { CmdBar } from 'cmd-bar'<CmdBar :groups="groupedCommands">  <CmdBar.Dialog>    <template #header>      <CmdBar.Input placeholder="search for anything />    </template>    <template #content>      <CmdBar.VirtualList :config="listConfig">          <template #default="{ command }">            <div class="leading">              <img :src="command.leading" alt="icon" />              {{ command.label }}            </div>            <span v-if="command.shortcut" class="actions">              <kbd v-for="shortcut of command.shortcut)" :key="shortcut">                {{ shortcut }}              </kbd>            </span>          </template>      </CmdBar.VirtualList>    </template>  </CmdBar.Dialog></CmdBar>

Edit this page on GitHub

IntroductionData Structure