Getting started ​

A quick tutorial to get you up and running with MASC Vue.

Implementing a Button ​

In this quick tutorial, we will install and style the Button component.

1. Install the package ​

Install the component from your command line.

pnpm add masc-vue
# yarn add masc-vue
# npm i masc-vue

pnpm add masc-vue
# yarn add masc-vue
# npm i masc-vue

2. Import the parts ​

Import and structure the parts.

<script setup lang="ts">
import { SBtn } from "masc-vue";
</script>

<template>
	<s-btn>Default Button</s-btn>
</template>

<script setup lang="ts">
import { SBtn } from "masc-vue";
</script>

<template>
	<s-btn>Default Button</s-btn>
</template>

3. Add your classes ​

Add classes as desired.

<template>
	<s-btn>Default Button</s-btn>
	<s-btn class="btn-primary px-10">Primary Button</s-btn>
</template>

<template>
	<s-btn>Default Button</s-btn>
	<s-btn class="btn-primary px-10">Primary Button</s-btn>
</template>

Demo ​

Here's How it looks.

Summary ​

The steps above outline briefly what's involved in using a MASC component in your application.

In a few simple steps, we've implemented a button component, without having to worry about many of its complexities.