Shoelace with Astro (vitejs) not importing components

[skorphil]

Hi, i'm trying to setup shoelace to use with Astro and do not understand how do i use components.
I installed shoelace with npm like described here - https://shoelace.style/getting-started/installation#bundling

What should i suppose to do next?
I've tried different importing strategies in my .astro page and it is not working:

import '@shoelace-style/shoelace/dist/components/button/button.js'; // [ERROR] MutationObserver is not defined
---
import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
<SlButton>Click me</SlButton> // // [ERROR] MutationObserver is not defined
---
<sl-button>Click me</sl-button> // just div created

should i additionally configure vite somehow or should i import components in another way? Please help me to figure this out

[skorphil]

Solved this by importin via <script>, not in frontmatter:

---
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
setBasePath("dist/assets");
---

<script>
  import("@shoelace-style/shoelace/dist/themes/dark.css");
  import("@shoelace-style/shoelace/dist/components/button/button.js");
</script>
...
<sl-button>click me</sl-button>

also configured vite in astro, according to this example https://stackblitz.com/edit/vitejs-vite-jfzwow?file=vite.config.ts&terminal=dev

// astro.config.mjs

+ import { viteStaticCopy } from "vite-plugin-static-copy";
+ const iconsPath = "node_modules/@shoelace-style/shoelace/dist/assets/icons";

export default defineConfig({
+ vite: {
    resolve: {
      alias: [
        {
          find: /\/assets\/icons\/(.+)/,
          replacement: `${iconsPath}/$1`,
        },
      ],
    },
    build: {
      rollupOptions: {
        // external: /^lit/,
        plugins: [],
      },
    },
    plugins: [
      viteStaticCopy({
        targets: [
          {
            src: iconsPath,
            dest: "assets",
          },
        ],
      }),
    ],
  },
});

[b-d-m-p]

Thanks! This worked for me too! Actually, I was just looking to set the base path to get the icons working. The import and your config fixed it for me.

[b2m9]

@skorphil As far as I can tell this renders the Shoelace Button on the client only. Have you ever got it to work with Astro's SSR support for Lit?

[skorphil]

@skorphil As far as I can tell this renders the Shoelace Button on the client only. Have you ever got it to work with Astro's SSR support for Lit?

Does not know what lit is. Yes, shoelace components only work on client - that is the point

[b-d-m-p]

I made a starter kit that works without the config. https://github.com/b-d-m-p/astro-shoelace-starter-kit-blog