DEV Community

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 thos...
Collapse
 
peter profile image
Peter Kim Frank

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.

😆

Collapse
 
matt123miller profile image
Matt Miller

I know I'm late to the party but thank you so much for this! This is exactly what I was looking to implement and you've given me a skeleton to follow and adapt. This is the last hurdle to me actually deploying my site for real instead of procrastinating for the last year. My own site is using Nuxt but it shouldn't be that difficult to incorporate :) Here it is for reference matt123miller-site.herokuapp.com/

Collapse
 
vycoder profile image
yev

That's cool! I never really thought that this could really help help in any way!

Collapse
 
jamesdordoy profile image
James Dordoy

Thanks for this, using your implementation i created a simple SPA with markup rendering for code examples. Can be viewed here: jamesdordoy.github.io/laravel-vue-...

I made use of this component for markdown styling also github.com/metachris/vue-highlightjs. You can just wrap the markdown components and github styling will be applied.

Great article, thanks for making it.

Collapse
 
misterlinux profile image
Misterlinux • Edited

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?

Collapse
 
vycoder profile image
yev

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

Collapse
 
misterlinux profile image
Misterlinux

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:

github.com/Misterlinux/quasi-blog

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.

Collapse
 
malgamves profile image
Daniel Madalitso Phiri

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

Collapse
 
vycoder profile image
yev

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.

Collapse
 
malgamves profile image
Daniel Madalitso Phiri

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

Thread Thread
 
vycoder profile image
yev

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

Collapse
 
tobiassn profile image
Tobias SN • Edited

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.

Collapse
 
vycoder profile image
yev • Edited

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.

Collapse
 
anandbaraik profile image
Anand-Baraik

What tech stacks did you use for the portfolio. It looks awesome.

Collapse
 
vycoder profile image
yev

Thanks! I'm not a very frontend-y guy probably way overkill. But it's just quasar and vue and some other stuff. It's on github if you're curious and want to look around: github.com/josephharveyangeles/por...

Collapse
 
anandbaraik profile image
Anand-Baraik

Thank you, I'll definitely look into it for ideas.

Collapse
 
prashantnirgun profile image
Prashant Nirgun

Thanks I was frustrated with Mediawiki updates and I try to move it to some other domain it get failed. I was searching for .md file CMS. My search will end over here. I can style and add tags functionality and it will be done for me.

Collapse
 
dimensi0n profile image
Erwan ROUSSEL

Nice post 💪

Collapse
 
vycoder profile image
yev

Thanks! Glad you appreciate it!

Collapse
 
andreasvirkus profile image
ajv • Edited

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!

Collapse
 
vycoder profile image
yev

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.

Collapse
 
josiasaurel profile image
Josias Aurel

Thanks for this great article.

Collapse
 
rojadesign profile image
Rush

A little bit late, but I really appreciate your effort on this. I used your approach and I'm very happy about the results. Thank you!

Collapse
 
rattanakchea profile image
Rattanak Chea

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

Collapse
 
vycoder profile image
yev • Edited

Hi, It is possible. Simplest way I can think of is to just name your markdowns like: blog-post-2.md 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 blog-post.md 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.

Collapse
 
mgh87 profile image
Martin Huter

Really nice blog you created there!

Collapse
 
vycoder profile image
yev

Thanks!

Collapse
 
manavsmo profile image
manavpanchal

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

Collapse
 
xiamuguizhi profile image
夏目贵志

Great idea, I'm trying to build it.

Collapse
 
ilteriskeskin profile image
Ali İlteriş Keskin

Hey, great post. Thanks!

Collapse
 
rudestewing profile image
Rudi Setiawan

Thank's man

this is all i need

I just want to make simple static content with my vue-cli project

Collapse
 
yeikiu profile image
Yeikiu

Great post! Only missed a reference to the base repo you got the main idea from github.com/yeikiu/vue3-md-blog ;-)