diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index a434d675..cb8c3ae4 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -1,6 +1,7 @@
import * as path from 'path';
import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
import { parse } from 'comment-parser';
import { pascalCase } from 'pascal-case';
import commandLineArgs from 'command-line-args';
@@ -218,6 +219,12 @@ export default {
url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
};
}
+ }),
+
+ customElementVuejsPlugin({
+ outdir: './dist/types/vue',
+ fileName: 'index.d.ts',
+ componentTypePath: (_, tag) => `../../components/${tag.replace('sl-', '')}/${tag.replace('sl-', '')}.component.js`
})
]
};
diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
index 0b6d5405..084d84ea 100644
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -417,7 +417,7 @@ const App = () => (
### Loading
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
+Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
```html:preview
Default
diff --git a/docs/pages/frameworks/vue.md b/docs/pages/frameworks/vue.md
index 6416c2ce..d98ddb50 100644
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -35,35 +35,22 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
## Configuration
-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { fileURLToPath, URL } from 'url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [
- vue({
- template: {
- compilerOptions: {
- isCustomElement: tag => tag.startsWith('sl-')
- }
- }
- })
- ],
- resolve: {
- alias: {
- '@': fileURLToPath(new URL('./src', import.meta.url))
- }
- }
-});
-```
+If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
Now you can start using Shoelace components in your app!
+## Types
+
+Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+
+```json
+{
+ "compilerOptions": {
+ "types": ["@shoelace-style/shoelace/dist/types/vue"]
+ }
+}
+```
+
## Usage
### QR code generator example
@@ -126,7 +113,7 @@ Are you using Shoelace with Vue? [Help us improve this page!](https://github.com
### Slots
-To use Shoelace components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
+Slots in Shoelace/web components are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
Here is an example:
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 90ba0618..cb075a4c 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -14,17 +14,25 @@ New versions of Shoelace are released as-needed and generally occur when a criti
## Next
+- Added the `hover-bridge` feature to `` to support better tooltip accessibility [#1734]
+- Added the `loading` attribute and the `spinner` and `spinner__base` part to `` [#1700]
- Fixed files that did not have `.js` extensions. [#1770]
- Fixed `` not accounting for elements with hidden dialog controls like `