Example lib for @skirtle/create-vue-lib

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/@skirtle/example-vue-lib/dist/example-vue-lib.global.prod.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@skirtle/example-vue-lib/dist/example-vue-lib.prod.css">
<div id="app" class="main">
  <example-component></example-component>
  <my-panel title="Panel title" footer="Panel footer">
    Header and footer
  </my-panel>
  <my-panel title="Panel title">
    Just a header
  </my-panel>
  <my-panel footer="Panel footer">
    Just a footer
  </my-panel>
  <my-panel>
    No header or footer
  </my-panel>
</div>

CSS

.main {
  max-width: 300px;
}

.main > * + * {
  margin-top: 10px;
}

JavaScript

Vue.createApp({
  components: {
    ExampleComponent: ExampleVueLib.ExampleComponent,
    MyPanel: ExampleVueLib.MyPanel
  }
}).mount('#app')