[Bug]: Sidebar injection error

evgeshaDoc commented 3 weeks ago

Reproduction

in description

Describe the bug

Injection error on initializing Sidebar component, wrapped in my own component.

A component looks like this

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Sidebar, SidebarContent, SidebarTrigger } from '@/components/ui/sidebar'
import { SidebarIcon } from 'lucide-vue-next'
</script>
<template>
    <div>
        <Sidebar>
            <SidebarTrigger>
                <Button variant="outline" size="icon"><SidebarIcon class="w-4 h-4" /></Button>
            </SidebarTrigger>
            <SidebarContent></SidebarContent>
        </Sidebar>
    </div>
</template>

<style scoped></style>

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M2
    Memory: 684.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.5 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
    bun: 1.1.27 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.70
    Safari: 17.5
  npmPackages:
    @vueuse/core: ^10.11.1 => 10.11.1 
    radix-vue: ^1.9.8 => 1.9.8 
    vue: ^3.3.4 => 3.5.12

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

evgeshaDoc commented 3 weeks ago

wrong implementation by me

Mirinael commented 3 weeks ago

@evgeshaDoc Can you please tell me what you changed ?

I am facing the same issue and I can't find what I'm doing wrong...

LuckyStar04 commented 3 weeks ago

same here

@evgeshaDoc Can you please tell me what you changed ?

I am facing the same issue and I can't find what I'm doing wrong...

evgeshaDoc commented 3 weeks ago

@LuckyStar04 @Mirinael

try to use it like it is used here basically all you need is wrap your sidebar component with SidebarProvider

LuckyStar04 commented 3 weeks ago

@LuckyStar04 @Mirinael

try to use it like it is used here basically all you need is wrap your sidebar component with SidebarProvider

Thanks a lot! But now I am facing the style issues, it seems all the text-sidebar-foreground css class not working. I've tried add sidebar css variables to index.css but not working, any clues?

max3xyz commented 3 weeks ago

@LuckyStar04 @Mirinael try to use it like it is used here basically all you need is wrap your sidebar component with SidebarProvider

Thanks a lot! But now I am facing the style issues, it seems all the text-sidebar-foreground css class not working. I've tried add sidebar css variables to index.css but not working, any clues?

I had the same issue. Add this to your tailwind.config.js

sidebar: {
          'DEFAULT': 'hsl(var(--sidebar-background))',
          'foreground': 'hsl(var(--sidebar-foreground))',
          'primary': 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          'accent': 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          'border': 'hsl(var(--sidebar-border))',
          'ring': 'hsl(var(--sidebar-ring))',
        },

Also check this: https://github.com/unovue/shadcn-vue/blob/e0d4980e31161482e94852ddc2a1277c68a86555/apps/www/tailwind.config.js

unovue / shadcn-vue