Dialog

[marcovc]

I tried including the example code (below) in a vue3 app. But when I press ctrl+k, the menu shows completely unstyled, not even in a modal, but inlined with the text. Do I need to include something else to make this work?

Thanks

<template>
    <Command.Dialog :visible="props.visible" theme="custom">
      <template #header>
        <Command.Input placeholder="Type a command or search..." />
      </template>
      <template #body>
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>

          <Command.Group heading="Letters">
            <Command.Item>a</Command.Item>
            <Command.Item>b</Command.Item>
            <Command.Separator />
            <Command.Item>c</Command.Item>
          </Command.Group>

          <Command.Item>Apple</Command.Item>
        </Command.List>
      </template>
    </Command.Dialog>
  </template>

<script lang="ts" setup>
import { Command } from 'vue-command-palette'

const props = withDefaults(
  defineProps<{
    visible?: boolean;
  }>(),
  {
    visible: false,
  }
);
</script>

[marcovc]

I also tried using the Command inside a Dialog object of the framework I am using (primevue). When inspecting the html though, it seems nothing is there :

This is the code:

<template>
  <Dialog
    :visible="props.visible"

    header="Edit Profile"
    :style="{ width: '25rem', height: '25rem' }"
  >
    test
    <Command theme="algolia">
      <template #header>
        <Command.Input placeholder="Type a command or search..." />
      </template>
      <template #body>
        test
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>

          <Command.Group heading="Letters">
            <Command.Item>a</Command.Item>
            <Command.Item>b</Command.Item>
            <Command.Separator />
            <Command.Item>c</Command.Item>
          </Command.Group>

          <Command.Item>Apple</Command.Item>
        </Command.List>
      </template>
    </Command>
  </Dialog>
</template>

[gsabater]

@marcovc Yes, you need to style the CSS yourself.

You can browse the repository, where there are some premade styles you can use https://github.com/xiaoluoboding/vue-command-palette/blob/main/src/assets/scss/algolia.scss

[marcovc]

But is it not only needed to pass the theme="algolia" parameter? Or do I have to do anything else?

[gsabater]

@marcovc At the link in my previous post, there is a bunch of css rules you need to include into your project. Then, add the theme in the first line of your command. You can keep algolia, or change it to anything you want, but the css rules must have the same name

<template>
    <Command.Dialog :visible="props.visible" theme="algolia">

[marcovc]

Got you, thanks!