webcie-vue-library v0.0.1

vue-component-library

This is the proteus-eretes vue library, mainly used for our webapp. It is setup by vue-sfc-rollup. Click here for more info on there repo.

Component in library

• Avatar
• Button
• Card
• Grid

• InfiniteList

• Form elements

  • Checkbox
  • Dropdown
  • Input
  • Radio
  • Textarea
  • Texteditor

Getting started

npm install
npm run serve

Setting up first component

Go to the src/lib-components folder and create a new file like the one below.

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
type ExampleState = "default" | "on" | "off";

@Component({
  components: {
    Icon,
  },
})
export default class Example extends Vue {
  @Prop({ type: String, default: "default", required: false }) readonly state?: ExampleState;

  name = "testing";
}
</script>

<template>
  <div class="example">
    <h3>hello: {{ name }}</h3>
    <div class="state">state is: {{ state }}</div>
  </div>
</template>

<style scoped lang="scss">
.example {
  background: var(--grey-color-200);
  padding: var(--padding-huge);
  margin: 5rem auto;
  border-radius: var(--corner-radius);

  & .state {
    color: red;
  }
}
</style>

To add this component to the library, go to the src/lib-components/index.ts file and add the following line to it.

export { default as Example } from "./Example.vue";

And that is it you just contributed your first component to the webcie vue library.

Testing your components

Navigate to the dev/serve.vue file and import it, then add it to the components list.

<script>
import Vue from "vue"
import { Example } from '@/entry.esm';

export default Vue.extend({
  name: "ServeDev",
  components: {
    ...,
    Example
  }
})
</script>

Then test all parameters in the template like this:

<template>
  <div id="app">
    <Example />
    <Example state="on" />
  </div>
</template>

Sometimes a restart of the development server is required by running npm run serve again.