In the previous lesson, we defined the names of the components of the app. Now we’ll add them to the App component (found in src/App.vue), and we’ll organize them inside its template.

Open the App.vue file. If you did not clear its content before, do it now.

We’ll add the template and script sections, we first import the components we defined and then we add them to the components property of the App component, so they are available for usage in the template:

<template>
  <main></main>
</template>

<script>
  import Vue from 'vue'

  import AddCategory from './components/AddCategory.vue'
  import AddBill from './components/AddBill.vue'
  import NavBar from './components/NavBar.vue'
  import Chart from './components/Chart.vue'
  import BillsTable from './components/BillsTable.vue'

  export default {
    name: 'app',
    components: {
      AddCategory,
      AddBill,
      Chart,
      BillsTable,
      NavBar,
    },
  }
</script>

Now we can start drafting the structure of the template.

We have the NavBar on top, followed by the main part of the page, separated into 2 parts: the table, and the chart.

<template>
  <main>
    <NavBar />
    <div class="container flex">
      <div class="w-1/2">
        <BillsTable />
      </div>
      <div class="w-1/2">
        <Chart :bills="activeBills" />
      </div>
    </div>
  </main>
</template>

See those classes I added to the div container elements? They are quite clear about what the thing should do: there should be a container element div which uses Flexbox to lay out its 2 child elements. Both those child elements have a w-1/2 class assigned, which means they should each take 50% of the space available.

container, flex and w-1/2 are Tailwind.css classes.

If you’re unfamiliar with it, Tailwind is a cool CSS utility framework. Compared to Bootstrap or other popular frameworks, it does not provide any kind of widget, but instead, it provides a set of classes that do one thing, and they do it well. Check out briefly the introduction on the Tailwind site before going on.

Now, we need to include Tailwind in the project, in order for those classes to work.

How do we do it? There are different ways to include Tailwind in a project. The simplest one is to just use a link tag in your HTML, and it’s also the only way we can do it on CodeSandbox. If you use the Vue CLI locally, you have the option of using PostCSS (see the installation docs for more info, and my tutorial using Tailwind with Vue).

Open the public/index.html file in CodeSandbox and add a link tag to include the Tailwind CSS:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"
/>

Now if you add the name of the component in each component file like this:

<template>
  <p>NavBar</p>
</template>

you will get this structure, as expected:

See the code on CodeSandbox.


Go to the next lesson