mTools Docs

# Templates

Here you can find several rules how to build, manage and extend templates. Please read them all, check the existing components to follow the rules from references as well.

# Keep them dummy and simple

Avoid using logic in the templates. Try to keep your logic in the scripts. Simple methods, assignments, conditions - all of them should be placed in the scripts. Use computed values and methods. Don't build huge markups, split the code to smaller components. Loops, blocks, grid elements - they all can be placed and used as a separated component. This way your code will be easier to use, cleaner, reusable, more scalable and ready to test (without headaches).

Conditions

<!-- Bad -->
<div if="items && items.length > 0" />

<!-- Good -->
<div if="itemsAvailable" />

<script lang="ts">
export default Vue.extend({
  setup() {
    const itemsAvailable = computed(() => items && items.length > 0)
    return {
      itemsAvailable,
    }
  },
})
</script>

Assignments

<!-- Bad -->
<div @click="itemsAreVisible = true" />

<!-- Good -->
<div @click="showItems" />

<script lang="ts">
export default Vue.extend({
  setup() {
    const itemsAvailable = ref(false)
    const showItems = () => {
      itemsAvailable.value = true
    }
    return {
      showItems,
    }
  },
})
</script>

# Use Bootstrap components

We're using the Vue Bootstrap library to handle the UI elements. Most of them are already implemented and used in the app. Stylings for them are laying on the Metronic (opens new window) system and are placed in the assets folder. If you don't see any related component in the codebase ask other developers if they already used it or it needs to be added to the application.

# Use base and predefined classes

Boostrap Vue comes with all the style utility classes. Paddings, margins, grids, flex, all of them are available. Don't hesitate to use them in you markup. Also, we defined the set of base classes, you can find them in the assets/styles folder, check and use one of them. If something is missing and can be potentially reusable across the whole codebase add it.

# Don't use breaks, follow the semantics

Your template should be written as a semantic, well-ordered HTML markup. You don't need to use breaks in your code, look after readability and natural structure of the HTML. It's super important to follow the general rules of HTML semantics, "hear" your IDE when it comes to proper markup structure. For instance remember about lables in four forms or to not put divs as a list elements.

# Write readable loops

While creating for loops in the templates by using v-for directive try to define simple and readable values. Follow the name of iterated items in array. If you're iterating across the users name the item of iteration user.

<!-- Bad -->
<ul v-for="(item, index) in users" :key="index">
    <li>{{ item }}</li>
</ul>

<!-- Good -->
<ul v-for="(user, index) in users" :key="index">
    <li>{{ user }}</li>
</ul>

<!-- Good -->
<ul v-for="user in users" :key="user.id">
    <li>{{ user.name }}</li>
</ul>

← Scripts →