Firstly I am glad to be learning tech at Altschool Africa, I am also very much glad that altschhol equip us by ensuring we have projects and assessment to test what we have been learning. The pushing is real. After learning Vuejs I wanted to build something real, something that would force me to struggle, make mistakes, and actually understand what I was doing. Then Altschool gave us an assessment during the holiday to build a markdown… Lol.

A markdown editor felt like the right choice.

It wasn’t too simple, but it also wasn’t something I’d abandon halfway through.

What I didn’t expect was how many real development problems I’d run into. styling issues, Git errors, confusing Vue concepts, and moments where nothing worked and I didn’t even know why.

This article isn’t a perfect tutorial.

It’s an honest account of what building my first Vue project actually looked like.

Why I Built The Markdown Editor

Firstly it was a semester assessment project also like many developers learning frontend frameworks, I wanted a project that:

• Used real state management

• Had live updates

• Involved user input

• Was something I could actually show to others

A markdown editor checked all those boxes.

I also wanted to practice Vue 3, TypeScript, and Tailwind CSS together instead of learning them in isolation.

The Tech Stack I Chose (and Why)

Here’s what I used:

• Vue 3 (Composition API): because it’s the modern Vue standard

• TypeScript: to catch mistakes early

• Tailwind CSS: for fast styling

• Bun: mostly out of curiosity (and speed) also recommended by my instructor Mr Setemi Ojo

• marked: to convert markdown to HTML

• DOMPurify: to keep things secure

Looking back, this stack taught me a lot, not just about Vue, but about how tools interact with each other.

How the App Is Structured (Simple but Powerful)

The entire app is built around three components.

App.vue: The Parent That Holds Everything Together

At the top level, I had just one piece of state:

const markedText = ref("");

This single ref holds the markdown text. Whenever it changes, Vue automatically updates both the editor and the preview.

This was my first real “aha” moment with Vue’s reactivity. No extra libraries. Just ref.

Editor.vue: Me Understanding v-model

This component confused me at first.

const props = defineProps<{ modelValue: string }>();

const emit = defineEmits<{
(e: "update:modelValue", value: string): void;
}>();

I kept asking myself, “Why do I need both modelValue and update:modelValue?” Then it clicked. Props flow down while events flow up. v-model is just Vue helping me manage both directions cleanly.

Once I understood that, input handling stopped feeling magical and started making sense.

Preview.vue: Where Everything Comes Together

This is where the markdown is rendered in real time.

const renderedMarkdown = computed(() => {
const rawHtml = marked.parse(props.markedText);
return DOMPurify.sanitize(rawHtml as string);
});

This single block taught me three important lessons:

• Lesson 1: Computed properties matter. Using computed means Vue only recalculates when the markdown text changes. If I had used a normal function, it would run on every render. This was my introduction to performance aware thinking, even in small apps.

• Lesson 2: Security is not Optional. Rendering markdown requires v-html, which can be dangerous. Without sanitization, users could inject malicious scripts. Using DOMPurify wasn’t optional—it was necessary.

• Lesson 3: Lifecycle Hooks Prevent Hidden Bugs I added a real-time clock to the preview header. My first version worked… but it had a memory leak.

•     // ❌ Bad
      setInterval(() => {
      time.value = new Date().toLocaleTimeString();
      }, 1000);
      The interval kept running even when the component was destroyed.
  

  In the code above, the interval kept running even when the component was destroyed. The fix:

•     let interval: ReturnType<typeof setInterval>;
  
      onMounted(() => {
      interval = setInterval(() => {
      time.value = new Date().toLocaleTimeString();
      }, 1000);
      });
  
      onUnmounted(() => {
      clearInterval(interval);
      });
  

  This experience taught me that things can work and still be wrong.

The Struggles That Nearly Slowed Me Down

Tailwind Was Completely Broken At one point, no styles applied at all.

After hours of confusion, I realized I was mixing @tailwindcss/vite plugin and traditional PostCSS setup

They conflicted. The fix for me was going back to the stable approach:

export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

What This Project Really Taught Me

• Vue’s reactivity is simpler than I expected

• TypeScript forces better thinking

• Cleaning up side effects matters

• Documentation saves hours

• Restarting is sometimes faster than debugging

• Writing about what you learn helps it stick

A Checklist I Now Think About While Coding

• Does this component do one thing?

• Am I cleaning up side effects?

• Is user input safe?

• Are names clear?

• Would someone else understand this?

• Is this the simplest working solution?

Final Thoughts

Three weeks ago, I didn’t know Vue. Now I have a working markdown editor with real-time updates, clean architecture, type safety and security considerations. Am I an expert? No. Am I learning properly? Yes. The gap between learning and being job-ready is filled with projects like this; projects where things break, where one get stuck, where one ask questions, and slowly figure things out.

That’s not failure, that’s progress and I’m glad to be living my progress gradually.

🔗 Project Link GitHub: github.com/Ayomiposy/vue_markdown