Bundling into Components

Let's now modularize our app div sections into components. We will be using PascalCase names when registering components.
Since PascalCase are not usable in DOM templates, Vue supports resolving kebab-case tags to components registered using PascalCase. This means a component registered as MyComponent can be referenced in the template via both <MyComponent> and <my-component>

Beginning with the app screen, let's create a component AppScreen in the components folder and then cut-paste the div that defines the calculator screen into that component.

<!-- src/components/AppScreen.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const calculations = ref(0)
</script>
<template>
    <div 
    class="h-20 w-[600px] border border-gray-400 
    my-3 rounded-lg relative">
        <span 
        class="icon-[material-symbols--device-reset-rounded]
        absolute top-2 left-2 text-2xl text-gray-500 cursor-pointer">
        </span>
        <div class="absolute bottom-2 right-2 text-4xl">
        {{ calculations }}
        </div>
    </div>
</template>

Onto the next, let's create a component AppButtons for the buttons side of the screen. And then, for each button in the buttons section, it will reside in the AppButton component.

Hence, I will introduce a concept, props.

Props allows for data flow from the parent to the child, hence each symbol of each button is passed to the AppButton component in a prop.

💞props ✅

For the AppButtons component, this is its codebase:

<!-- src/components/AppButtons -->
<script setup lang="ts">
import { reactive } from 'vue'
import AppButton from './AppButton.vue'

const buttons = reactive([
    'Rad', 'Deg', 'x!', '(', ')',
    '%', 'AC', 'Inv', 'sin', 'ln',
    '7', '8', '9', '÷', 'π', 
    'cos', 'log', '4', '5', '6', 
    '×', 'e', 'tan', '√', '1', 
    '2', '3', '-', 'Ans', 'EXP',
    'x<sup>y</sup>', '0', '.', '=', '+'])
</script>
<template>
    <div class="grid grid-cols-7 grid-rows-5 gap-[6px]">
        <div class="col-span-2 flex justify-between items-center bg-complex rounded">
            <app-button :symbol="buttons[0]"></app-button>
            <div class="bg-gray-400 h-4/6 w-[1px]"></div>
            <app-button :symbol="buttons[1]"></app-button>
        </div>
        <div
        v-for="(button, i) in buttons.slice(2)"
        :key="i">
            <app-button :symbol="button"></app-button>
        </div>
    </div>
</template>

For the AppButton component, its details are as follows:

<!-- src/components/AppButton -->
<script setup lang="ts">
import { reactive } from 'vue'

defineProps<{
  symbol: string
}>()

const basic = reactive([
    '0', '1', '2', '3', '4', '5', 
    '6', '7', '8', '9', '.'])
</script>
<template>
  <div
    class="calculator-button rounded"
    :class="
      basic.includes(symbol) ? 
      'bg-basic' : symbol == '=' ? 
      'bg-highlight text-white' : 'bg-complex'
      ">
    <span v-html="symbol"></span>
  </div>
</template>

Finally, the contents of App.vue are now modularized and have a very clear syntax

<!-- src/App.vue -->
<script setup lang="ts">
import AppScreen from "@/components/AppScreen.vue"
import AppButtons from "@/components/AppButtons.vue"

</script>
<template>
  <div class="h-screen w-screen grid place-items-center bg-white">
    <div>
      <app-screen></app-screen>
      <app-buttons></app-buttons>
    </div>
  </div>
</template>

📂component basics ✅