@moxiworks/mds-vue
TypeScript icon, indicating that this package has built-in type declarations

0.23.0 • Public • Published

@moxiworks/mds-vue

npm

This package in the monorepo serves as the Vue integration for the Stencil-generated components. The lib directory within this package contains the Stencil-generated components, which are built to be consumed by Vue applications.

Generating the lib Directory

The lib directory holds the Stencil-generated components, which serve as the foundation for the Vue library. These components are defined using web standards and can be used seamlessly within Vue applications. To generate the lib directory, run the build script in the stencil-library package. In the packages/stencil-library/stencil.config.ts, you can see the config for outputting this.

Building the lib Directory

The yarn build script handles the tsc build. The output is stored in the dist directory. Only run this command after successfully completing the previous step.

Usage

  1. In your vue application, add the @moxiworks/mds-vue package to your dependancies.

    Make sure you replace the x.x.x with the latest version, we can be found in the badge at the top of this doc. Avoid using ^ or ~, as we want to be using the exact value.

"dependencies": {
  "@moxiworks/mds-vue": "x.x.x"
}
  1. Install the package
yarn install
// or
npm install
  1. Define the custom components in the vite.config.ts file.
export default defineConfig({
  plugins: [
+   vue({
+     template: {
+       compilerOptions: {
+         // treat all tags with a `mx-` as custom elements
+         isCustomElement: (tag) => tag.startsWith('mx-'),
+       },
+     },
+   }),
    vueJsx(),
  ],
})
  1. Import the component library plugin in the main.js file. Also include the mds-core.css stylesheet
// src/main.js
+ import '@moxiworks/mds-vue/dist/styles/mds-core.css'
import { createApp } from 'vue'
import App from './App.vue'
+ import { ComponentLibrary } from '@moxiworks/mds-vue';

+ createApp(App).use(ComponentLibrary).mount('#app');
  1. Use the components.
<template>
  <mx-button icon="mds-check">It works!</mx-button>
</template>

Readme

Keywords

none

Package Sidebar

Install

npm i @moxiworks/mds-vue

Weekly Downloads

91

Version

0.23.0

License

none

Unpacked Size

7.76 MB

Total Files

17

Last publish

Collaborators

  • servers.moxiworks
  • mitchell.sutton
  • kevinleedrum
  • adamwgriffin1
  • bertlovesernie
  • stakada