Made vue blades

<img src="" alt="MADE Vue project banner" />

Version Version: 0.1.0-alpha.6 Version Updated: 05/08/2022 By: MADE-Apps License: MIT

DownloadsLast30Days: 12

npm i made-vue-blades
yarn add made-vue-blades
MADE Vue project banner

MADE Vue - Blades

License - MIT Build - GitHub Actions Source - npmjs npm

A Vue 3 blade layout component, a UI pattern most commonly seen in the Microsoft Azure portal.

MADE Vue Blade Component


To customise the blade layout, you'll want to import the scss styling:

import "made-vue-blades/styles.scss";

In your main file, you can import the component:

import { createApp } from "vue";
import App from "./App.vue";

import Blades from "made-vue-blades";

const app = createApp(App);

You can then reference the blade layout component in your app:

  <m-blade-layout :blades="blades">
    <template v-for="blade in blades" v-slot:[blade.key] :key="blade.key">
        <p>This is some content from {{ blade.title }}</p>
        <button class="made-blade-button" @click="onCreateBlade">
          Create another blade

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      blades: [
          key: "blade1",
          title: "Blade 1",
          canClose: false,
  watch: {},
  methods: {
    onCreateBlade() {
      var currentIndex = this.blades.length;
        key: "blade" + (currentIndex + 1),
        title: "Blade " + (currentIndex + 1),
        canClose: true,

Copyright © 2020