AnywhereUI integration for Vue 3 apps.
@anywhere-ui/vue combines the core AnywhereUI experience with the tooling and APIs that are tailored to Vue 3 Developers.
These are AnywhereUI Web Components specifically build for Vue 3.
The css dependencies should be imported in main.js
or if use typescript main.ts
file
import "@anywhere-ui/core/dist/anywhere-ui/anywhere-ui.css";
Add this package to your project:
npm install @anywhere-ui/vue
Or:
yarn add @anywhere-ui/vue
Edit the main.js
or if use typescript main.ts
file like this:
import { createApp } from "vue";
import App from "./App.vue";
import { AnywhereUIVue } from "@anywhere-ui/vue";
const app = createApp(rootComponent)
.use(AnywhereUIVue as any)
.use(router);
router.isReady().then(() => {
app.mount("#app");
});
Import the component(s) you want to use:
import { AnyCheckbox } from "@anywhere-ui/vue";
Use it in your template as any Vue component:
<AnyCheckbox checked="true" label="Vue"></AnyCheckbox>
AnywhereUI Config provides a way to change the properties of components globally across an app. It can set the ripple effect, app mode, animations, and more.
To override the initial AnywhereUI config for the app, provide your config object as an additional parameter when installing the AnywhereUIVue
plugin:
import { AnywhereUIVue } from "@anywhere-ui/vue";
createApp(App).use(AnywhereUIVueVue as any, {
rippleEffect: false,
});
Below is a list of config options that AnywhereUI uses.
Config | Type | Default | Description |
---|---|---|---|
rippleEffect | boolean | true | If true adds ripple effect to the components. |
npm run build
- Build the core package
- Run build on this package
- Publish