If you love Vue, you might be thinking about using it with your static sites. But there are so many options between VuePress, Nuxt, and Gridsome — how should you pick? Here’s why I chose Gridsome as my Vue framework for a recent project.
What is a static site?
A little background for anyone who doesn’t know. If you already know about static sites, feel free to skip this section.
From Wikipedia:
A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to the user’s web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.
Basically, with a static site, we can throw a bunch of files on the internet, point a server at those files and call it a day. Everybody on the internet will see the exact same output from those files.
Furthermore, we can cache those files and even store them on a CDN to make site access blazing fast. Since the content of those files is static, we don’t need to wait for a web server in order to respond to the user.
Static site generators are growing in popularity because they help you compile static sites that you can deploy easily. You’ve possibly heard of Gatsby, Hugo, Middleman, or Jekyll. Those all use different languages or other javascript frameworks.
This post is focusing on static site generators for Vue.
Here are my impressions of Vue static site generators and which are the best.
VuePress: too documentation focused
VuePress is what powers the official VueJS site and it’s from the creators of Vue, so it must be good right?
Well, yes and no. VuePress is definitely a solid and popular option. However, I found it was a little too focused on creating documentation. I had trouble because VuePress was not flexible enough to create the site the way I wanted it.
Of course, I’m sure there were workarounds for the type of page structure and sitemap I was imagining. However, I wanted a framework that supported more flexibility. I also wanted the ability to add in dynamic data should I need it.
Nuxt: overkill for what I needed
Nuxt is an entire Vue framework with opinionated settings and bootstrapped components. It had everything I needed and more, but it came with a learning curve. One that was too steep for just setting up a simple static site.
Also, while you CAN use Nuxt to generate a static site, that’s not really what it’s built for. I was afraid I’d spend too long learning the ins and outs of Nuxt without really getting anything concrete built.
Gridsome: my winner for Vue static sites
Gridsome comes bootstrapped with an intuitive folder structure and easy-to-learn routing. Creating and linking pages is easy in your static site, and Gridsome doesn’t impose the same page hierarchies and structures as I found in VuePress.
In addition, Gridsome supports a GraphQL data layer that allows you to inject some server-like dynamic data handling, all within Vue.
Adding a CMS to power a blog is straightforward, and the deployment to Netlify went off without a hitch.
The End Result
This site is (obviously) not done — in need of content and some work to make it more usable for the marketing team.
However, I was able to build and deploy it in a weekend, using a pre-made theme, thanks to Gridsome.
Test | Garner Engineering _Get Started Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et…_compassionate-brattain-d18b0b.netlify.app
About Bennett
I’m a software developer in Providence, RI. I do web stuff in Python and JavaScript.
Like what you’ve read here? I have an email list you can subscribe to. Infrequent emails, only valuable content, no time wasters. I’d love to have you there.