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>