Creating a Simple Blog using Vue with Markdown

yev on March 18, 2019

I'm not a 'natural' frontend developer, learning vue and re-learning Javascript with my Java knowledge came as a challenge. Not to mention all th... [Read Full]
markdown guide

Great article and I love the writing style throughout.

Not to mention all those bundlers, builders, like webpack, gulp, grunt and other weird noises that adds to the overall complexitiy of learning modern web frameworks.



Hey awesome post! Did you have a routing problem when you deployed your site?


Hey, thanks! Nothing comes to mind. What sort of routing problem are you referring? I did encounter routing problems whenever I construct the route objects wrong. But I can't remember something deployment-specific.


I had to setup the _redirects file to let me open up the blog from a main page. For some reason, when I click to open a markdown file using router.push my console tells me the file doesn't exist so I'm guessing Vue did not add it to dist after running npm build. Even though I did add it to the public and src folders to test it

Ahh I see. I'm not entirely sure if I understand what happened in your case correctly. But my first guess is that it's really just a consequence of routing in SPA when not using hash mode. I don't particularly like this mode that's why my demo repo was set to history mode due to habit.

More info about this at vue-router docs: Server Configurations


This is certainly different to how I would do it. You might wanna consider checking out Vuepress. But this is certainly a good approach for those who don’t like using packages with too many dependencies, or just want full control.


Thanks for the response. You're right! I know and have tried Vuepress before and it's really cool. But this article is intended for those people who wants to build a really simple and easy blog without any third-party libraries in Vue. I might not have stressed that enough with the article.


Hello, I was trying the blog and I wanted to
add some different data from a different.js file into the
.vue file but I get the
"[Vue warn]: Property or method " " is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property."

do I need to create a new file or change the basic structure of a Vue instance?


Hi, I'm not sure I follow. Can you paste a code snippet?


Hello, sorry for the late response, after studying Vue I resolved the problem and I created a simple project in which I wanted to integrate the blog structure, here the link:

I will use the route structure of the route.js file into my project but I would like to separate and design different sections and not have them all in the same column.


Thanks for this, using your implementation i created a simple SPA with markup rendering for code examples. Can be viewed here:

I made use of this component for markdown styling also You can just wrap the markdown components and github styling will be applied.

Great article, thanks for making it.


Are you considering moving your current setup to Vuepress (version 1 is now out), since it has various plugins like sitemap & rss feed generation, PWA-capability baked in, etc?

Great write-up btw!


Hi, thanks for the response!

I haven't checked Vuepress again but maybe in the future I will, if things started difficult to manage. But right now, my website is pretty simple and straightforward, I still doesn't feel the need to add more stuff. I don't have that much audience anyway (aside from myself lol). While PWA and rss feed generation are cool and something I had considered before, I figured it's better to focus on at least putting out consistent blog entries first.


Well written. Is it possible to create pagination with this setup?


Hi, It is possible. Simplest way I can think of is to just name your markdowns like: and just add some indicator on blogs.json that a post has more than 1 page so you could display necessary buttons alongside back. Basically, you render but pressing and will just concatenate the page number.

Although, if things start to get more demanding. Might want to invest on using ButterCMS and the like.


Great post. I will be implementing many of these tips mentioned. Thanks for the share. VueJS Development

Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

vue sucks.

react sucks.

the entirety of javascript sucks.

computers aren't simple today you know

you can't even teach yourself properly on how they work without creating one yourself

that's all i wanted to say.

code of conduct - report abuse