Vue Revisited 2025

Introduction

Well a interview for a job means I need to revisit this. So hopefully I will learn new tricks. But first thing is I needed to install pygments 2.19 as that comes with a lexer for vue. To install this I made an python environment and installing it a there was no ubuntu package

python3 -m venv /opt/mediawiki-venv
source /opt/mediawiki-venv/bin/activate
pip install pygments==2.19.0

Then set mediawiki to point to it

$wgPygmentizePath = "/opt/mediawiki-venv/bin/pygmentize";

First off

Watching course on YouTube so will noted down anything but may duplicate. One of the things I liked about angular was it separated out the parts. That was before I did React for 5 years so now it is one thing I dislike now so that's a plus.

CSS

My chosen weapon is tailwind for css but the good news is styles in Vue can be scoped so you can just use css if you want

<style scoped>
main {
  max-width: 800pc;
  margin: 1rem auto;
}
</style>

Communicating with Parent

This is why I am watching the youtube to understand where there is a choice which do people choose. For communicating with the parent you can pass a function as a prop (React) or emit like Angular. The preferred is to emit.

// Child
<script>
function formSubmitted() {
  emit("addTask", newTask.value)
}
</script>

<template> 
<form @submit.prevent="formSubmitted">
...
</form>
</template> 

// Parent
<script>
function addTask(newTask: string) {
  console.log()
}
</script>
<template> 
<TaskForm @add-task="AddTask" />
</template>

Evaluating Expressions

Using a full colon before an expression means it is evaluated. To demonstrate.

<template>
<article v-for="task in tasks" :key="task.id">
   {{ task.title }}
</article>
Without the full colon key would = "task.id" with it, it is whatever the id is
</template>

Parent Child 2 This time it's personnel

So in the vid he created a list component, passed the items to it and then add a checkbox to represent if the task was done. He bound the item to a v-model and so it changed when the checkbox was clicked. Then went on to say this is not the best and you should update your data in the component that created it. So use emit.

conditional classes

Well if tailwind is not allowed I should learn this. Easy pezzy. :class takes and object where each property is a class and a boolean.

<template> 
<div :class="{ done: task.done }">
  {{task.title}}
</div>

computed

This is just like signals in Angular. Vue tracks the variables and updates appropriately. Gosh I've miss reduce.

<script>
const totalDone = computed(() => tasks
   .value
   .reduce((total, tasks) => task.done ? total + 1: total, 0))
</script>

New to me

Not sure this existed last time around but here we go.
We can add a name for the component to help the debugger with

<scripts>
defineOptions({
  name: 'FooterAddress',
})
</scripts>

We now define props with

<scripts>
defineProps<{
  title: string
  poBox: string
  postalCode: string
}>()
</scripts>

Setup Tailwind

No doubt this will change but this is what I used.
To install

npm install tailwindcss @tailwindcss/postcss postcss autoprefixer

For postcss

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}