FreeTemplate · Blogs
Blog Article
Long-form Vue 3 article template with hand-tuned Tailwind typography, a scroll-aware table of contents, code blocks, callouts, author box and related posts.
by Vueplay
Vue blog templates
A blog template needs a post list, an article page with comfortable typography, and the small extras like author details, tags and related posts. These Vue 3 blog templates cover those pages with Tailwind CSS 4 and class-based dark mode.
Posts come in as typed props, so the templates work with Markdown files, a headless CMS or your own API. Install one with npm, copy it, or remix it in the Vueplay Studio.
Free
FreeTemplate · Blogs
Blog Index
Vue 3 blog home template with a featured post, drawn cover art, category chips, live search, pagination and a newsletter signup. Tailwind CSS with dark mode.
by Vueplay
Good to know
Building blogs that hold up
- Prerender every post
- Blog content should be in the HTML the server sends. Use Nuxt, vite-ssg or another static generation step so posts are indexed and load fast.
- Add Article structured data
- Emit BlogPosting or Article JSON-LD with the headline, dates and author on each post. It helps search engines understand the page.
- Use semantic article markup
- Wrap each post in <article>, mark dates with <time datetime>, and keep one h1 for the post title with h2 and h3 for sections.
- Size images for the column
- Article images rarely need to be wider than the text column. Serve responsive sizes with srcset and lazy load everything after the first image.
FAQ
Questions
Can I use these blog templates with Markdown?
Yes. Parse your Markdown with the tool of your choice and pass the post data and rendered HTML into the templates as props.
How do I install a blog template?
Every item is a plain Vue 3 single-file component with no dependencies besides vue. Install it with npm from its vueplay.com/npm tarball URL, or copy the source straight into your project.