@fator/vue-material v0.2.5

vue-material

Requirements

• Vue.js 3.x

Installation

npm

$ npm i @fator/vue-material

yarn

$ yarn add @fator/vue-material

Usage

Import Styles

Import styles inside your main.js:

import { createApp } from 'vue'
import '@fator/vue-material/styles' // import styles
...

Use Components

Import and use components

<template>
  <h2>Vue Component</h2>
  <Button>Click me</Button> // <-- use component
</template>

<script>
import { Button } from "@fator/vue-material"; // <-- import component

export default {
  name: "MyApp",
  components: {
    Button, // <-- register component
  },
};
</script>

<style></style>

Adjust theme (optional)

Import and adjust theme colors. Colors need to be in rgb, like shown below.

import { createApp } from 'vue'
import theme from '@fator/vue-material/theme' // <-- import styles

  // default theme stylings
  // primaryColor: "26, 91, 255",
  // primaryBackgroundColor: "255, 255, 255",
  // secondaryColor: "255, 255, 255",
  // secondaryBackgroundColor: "27, 30, 44",
  // elevation: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.16)",
  // elevationColored: `0 10px 20px -10px `,
  // ripple: "26, 91, 255"

theme.primaryColor = '123, 104, 238' // <-- example
...

Documentation (optional)

You can always check the documentation inside your project. Currently it is not complete.

import { createApp } from "vue";
import MyApp from "./src/components/MyApp.vue";
import Documentation from "@fator/vue-material/documentation"; // <-- import documentation

const create = async () => {
  const app = createApp(MyApp);
  app.use(Documentation); // <-- use documentation
  app.mount("#app");
};
create();

<template>
  <h2>Vue Component</h2>
  <Documentation> // <-- display documentation
</template>

<script>
export default {
  name: 'MyApp',
}
</script>

<style></style>

Mixins (optional)

So far there is only one mixin available.

<template>
  <h2>Vue Component</h2>
  <Button @click="copyToClipboard('copy this text to clipboard')"
    >Copy to clipboard</Button
  >
</template>

<script>
import { Button } from "@fator/vue-material";
import { copyToClipboard } from "@fator/vue-material/mixins";

export default {
  name: "MyApp",
  components: {
    Button,
  },
  mixins: [copyToClipboard],
};
</script>

<style></style>