Oombla DocsMenuoombla.com

Vue

The base template for exporting assets as Vue components

The base Vue template follows the same logic as the React template to create Vue components for the exported assets. The Vue template is part of the Component template class and therefore will combine variants into a single component. The base Vue template outputs a Vue component in this basic shape:

<template>
  [<svg> or conditional variant <svgs>]
</template>

<script>
export default {
  props: {
    [...]
  },
  [...]
}
</script>

<style scoped>
  [...]
</style>

To understand the logic of what is happening in the template see the walkthrough given in the React template as it follows the same logic, just with Vue syntax.

Prop Types

Near the end of the Vue template, in the props object in the <script> section, where the variant prop definitions are output, Vue requires a type definition for each prop. The React template does not have an equivalent so I wanted to cover what is happening here.

The code looks like this:

<% _.uniq(variantValues.map(variantValue => typeof(variantValue))).map(variantType => print(_.upperFirst(variantType))) %>

What this one-liner does, working from the inside out, is convert the array of variant values to there JavaScript type with the typeof function (e.g. ['up', 'down'] is converted to ['string', 'string']) and then pares it down to an array of only the unique typeof values with the lodash uniq function. Then the values in this new array are capitalized with lodash’s upperFirst to match Vue’s syntax and printed in the final code output. If there are more than one an OR separator is printed between them.