When beginning in Vue it may seem easier to create self-contained components, use them in views and call it a day. But Vue components can be much more powerful.

Let’s consider an example where you have to create two views - Account and User.

Typically, you create an Account.vue view -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<template>
  <div class="account">
    <v-layout row wrap>
      <v-flex xs12 class="title">
        Accounts
      </v-flex>
      <v-flex xs12>
        <!-- lot of account fields -->
      </v-flex>
    </v-layout>
  </div>
</template>

You will repeat the same for Users. Accounts and Users have their distinct set of fields, and one may not find any significant commonality, right?

Well, the answer may be more sophisticated than that.

We reuse elements whenever we build UI.

• a specific layout that comprises of toolbar, footer, header and such
• toolbar that shows the title element
• button that enables query, creation of new record, or simple navigates to a specific view
• set of fields arranged in a certain way depending on the form factor

Even assuming that your framework does not support layouts out of the box, you should still consider each of those components of the UI to be created separately when possible. The objective is always to create components and assemble them like Legos to create the final UI.

Ideally you should have created all components required for the application in the initial days, and thereon just reuse those components for next set of features.

Let’s review with the same Account.vue component.

We will first take the layout out of the component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!-- ./components/layouts/LayoutWithToolbar.vue -->
<template>
  <div>
    <Toolbar></Toolbar>
    <v-app>
      <v-content><slot name="content">No content</slot> </v-content>
    </v-app>
    <v-footer>
      <!--  a lot of important information like copyright -->
    </v-footer>
  </div>
</template>

Use a standard panel to show toolbar, title of the toolbar and may be a few important buttons that belong in the toolbar.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- ./components/layouts/Panel.vue -->

<template>
  <LayoutWithToolbar>
    <template slot="content">
      <v-toolbar flat v-if="title">
        <v-toolbar-title class="blue--text title font-weight-bold"
          >{{title}}</v-toolbar-title
        >
        <v-spacer></v-spacer>

        <slot name="toolbar-items"></slot>
      </v-toolbar>

      <div class="white">
        <div class="pb-3">
          <slot name="content">No content</slot>
        </div>
      </div>
    </template>
  </LayoutWithToolbar>
</template>

Now, we finally change the Account.vue component -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div class="account">
    <Panel title="Accounts">
      <template slot="content">
        <v-layout row wrap>
          <v-flex xs12>
            <AccountList></AccountList>
          </v-flex>
        </v-layout>
      </template>
    </Panel>
  </div>
</template>

Instead of one big, monolithic Account.vue. we now have the component comprised of -

• layout
• toolbar + title + standard buttons in a panel
• account list and associated components

You can reuse the layout and the panel in User.vue and other views. The same opportunities can be found with the components to be used within AccountList component.

The big advantage of building with components is the easier scalability of the resulting application. Also -

• UI elements are standardized and easier to maintain. E.g. all toolbars within a data component may have the same colour and font
• Changes are easier - modify one Panel component instead of changing a title + toolbar changes in 151 components
• Application code remains readable even for the complex of the UIs