Displaying dynamic content with Vue

Setting Up Dynamic Content with Vue.js

At this stage, every blog post looked exactly the same—I needed to render content dynamically. Vue’s documentation was helpful, especially since their example used a blog format.

1. Using Props

   • I defined props to pass dynamic values into components.
   • Instead of hardcoded content, I used props to populate my templates.

2. Generating Components with v-for

   • I used v-for to loop through dummy content and dynamically generate multiple blog posts.
   • It was cool to see a few lines of code turn static content into dynamic, reusable components.

Rendering Blog Posts by ID

Now, I wanted users to click on a blog post and navigate to a detailed view of that post.

1. Setting Up Routing

   • I created a new route with the :id parameter to handle post navigation.
   • I struggled to figure out how to use <router-link> at first but found that v-for works inside it.

2. Using router-link to Dynamically Route Posts

   xmlCopy

   <router-link v-for="post in posts" :key="post.id" :to="'/post/'+post.id"> <PostListItem :title="post.title" :date="post.date"/> </router-link>

   This allowed dynamic routing while keeping everything reusable and scalable.

---

Designing the Blog Post View

For the blog post view, I decided to challenge myself by designing directly in code instead of using Figma. Big mistake.

• I spent way too much time playing around with layouts and alignments.
• Every small adjustment led to another, making the process inefficient.
• In contrast, Figma (or any prototyping tool) allows quick visual adjustments before writing code.

After several painstakingly long hours, I finally completed the mobile design for a blog post. Adjusting it for tablet and desktop was relatively simple—just a matter of adding breakpoints and tweaking spacing.

To give the blog posts a more authentic feel, I added an author section, displaying a profile picture, author name, and post date. Even though I’ll probably be the only writer, it looked more polished.

---

Next Steps: Backend Development

With the blog post view completed, it’s time to connect everything to the backend and start rendering real data from the database. Exciting times ahead!

Remember:

“

It’s okay to make mistakes, as long as they’re in the name of science!

”