Post update: We are progressively migrating Snipcart's front-end from Backbone to Vue.js, you can read about it right here.

Let's start by dropping a little knowledge for those not familiar with the progressive framework.

What is Vue.js exactly?

Vue is a lightweight, progressive JavaScript framework that helps you create web interfaces.

Don't be fooled by the "JS framework" part of the definition just yet. For Vue is quite different from its trendy counterparts—React.js & Angular.js. For starters, it's not an open source by-product of commercial tech giants like Google & Facebook.

Evan You first released it in 2014, with the intention of creating an "incrementally adoptable," modern JS library. That's one of the most powerful features of Vue: creating pluggable components you can add to any project without undergoing major refactors. Any developer can try out Vue in a project without jeopardizing or burdening its existing code base.

Pattern terminology apart, I feel like the premises of Vue are:

1. You can't know the entire state architecture of your app from the start

2. Your data will surely change on the runtime

It's around these constraints that the library shapes itself: it's incremental, component-based, and reactive. The granular architecture of the components lets you easily separate your logic concerns while maintaining reusability for them. On top of that, it natively binds your data to the views so they magically update when necessary (through watchers). Although the same definition could be said of many reactive frontend frameworks, I found Vue just achieved it more elegantly, and, for the majority of my use cases, in a better way.

Vue also has a softer learning curve than, say, React, which requires JSX templating knowledge. One could even say Vue is React minus the awkward parts.

For more in-depth comparisons with other JS frameworks—React, Angular, Ember, Knockout, Polymer, Riot—check out the official docs on the subject.

Last but not least, the performance & insightful dev tools Vue offers make for a great coding experience. No wonder its adoption is skyrocketing.

From open source projects like Laravel & PageKit to enterprise ones like Gitlab & Codeship (not to mention the Alibaba & Baidu giants), lots of organizations are using Vue.

Now, however, it's time to see how we are going to use it.

Our Vue.js example: a quick, SEO-friendly e-commerce app

In this section, I'll show you how to build a small e-commerce app using Vue 2.0 & Snipcart, our HTML/JS cart platform for devs. We'll also see how to make sure product pages are properly "crawlable" for search engine bots.

We haven't created these components yet, but no worries, they're coming later. ;)

Note that we employed mode: 'history' in our VueRouter declaration. This is important, as our prerender plugin won't work otherwise. The difference is that the router will use the history API instead of hashbangs to navigate.

2.3 Linking everything together

Now that we have both our store and our router, we'll need to register them in our app. Hop in your src/main.js file and update it as follows:

The TopContext component isn't really important; it acts only as a header. The key part is the router-view one: it will be determined dynamically by VueRouter, and the associated component we defined earlier will be injected instead.

The last view to update is the index.html. For our use case, we'll create a new static folder in the src one. There, we'll move our index file, and update as follows:

You can see we added Snipcart's necessary scripts in the default view. A small component granularly including them could have been cleaner, but since all our views need them, we did it this way.

5. Handling Vue.js SEO with the Prerender plugin

Everything in our app is rendered dynamically with JS, which isn't super for SEO: the asynchronous content of our pages can't be optimally crawled by search engine bots. It wouldn't be smart for us to have an e-commerce website missing out on all that organic traffic opportunity!

Let's use prerendering to bring more SEO opportunities to our Vue.js app.

Compared to Vue SSR (Server-Side Rendering), prerendering is much easier to set up. And quite frankly, the former is often overkill, unless you're dealing with lots of routes. Plus, both achieve quite similar results on an SEO level.

Prerendering will allow us to keep our frontend as a fast, light static site that's easily crawlable.

Let's see how we can use it. Go to your webpack file and add the following declaration to your top level export:

The CopyWebpackPlugin will copy our static folder (only containing the view referencing our Vue App) to our dist folder. Then, the PrerenderSpaPlugin will use PhantomJS to load the content of our pages and use the results as our static assets.

This will generate a dist folder containing everything needed for production.

Other important SEO considerations

Consider adding appropriate meta tags & a sitemap for your app pages. You can learn more about meta tags in the "postProcessHtml" function here.

Great content plays a huge role in modern SEO. We'd advise making sure content on your app is easy to create, edit, and optimize. To empower content editors, consider throwing a headless CMS into the mix and building a true JAMstack.

An HTTPS connexion is now officially a ranking factor for Google. We're hosting this demo on Netlify, which provides free SSL certificates with all plans.

GitHub repo & live Vue demo

Conclusion

Since I had worked with Vue before, crafting this tutorial went rather smoothly. I must've spent an hour on the demo. I struggled a bit to get CopyWebpackPlugin to work, but eventually found answers in their docs.

I hope this post encourages developers to start using Vue in some projects. Like I said, you can start slowly, by developing a tiny part of an existing project with it. I think it's definitely worth a try. Our lead developer is coding our latest merchant dashboard feature with Vue as I'm writing this, and he loves it. Plus, when set up right, a Vue app can drive good SEO results.

If you feel like getting inspired first, check out the Vue.js Awesome list, which curates loads of Vue examples & projects.

You can also take a look at our tutorial using the kick-ass Vue.js framework Nuxt.js.