Vue.js is a progressive* JavaScript framework created by Evan You to build user interfaces faster and more efficiently. The framework is designed to be easy to learn, use and integrate with other libraries and projects.
Note: *Vue is called a progressive JavaScript framework because you can use it on a specific component/part of your server-side application without committing to the framework for the entire project.
Although Vue.js hasn’t achieved the same level of adoption as Angular or React (which are backed by giant corporations, aka, Google and Facebook), it has been used by big companies like Nintendo, Adobe, Apple, and Trustpilot.
How Does Vue Compare to React and Angular
Comparing frameworks can be tricky as every developer has their own development philosophies and styles.
So consider this a quick overview of what makes Vue.js different from the other popular frameworks out there.
Note: You can check out our in-depth comparison between React and Angular for SEO to learn more about these frameworks’ unique quirks.
DOM vs. vDOM
Both Vue and React use a Virtual Document Object Model (vDOM) instead of a real DOM (which is the case with Angular), allowing for the frameworks to update specific elements without having to re-render the entire DOM tree—boosting the speed of the application or website.
That means that Single Page Applications (SPAs) built with Angular can be slower to load than Vue and React.
As page speed becomes more important after the Core Web Vitals update, Vue can be a great choice to create SEO-friendly websites.
Learning Curve
Of the three frameworks, Vue is the easiest to learn, thanks to its easy syntax and modularity.
One of the major features differentiating Vue from React is that Vue is built on top of HTML and CSS instead of expressing them through JSX.
A developer with basic knowledge of HTML, CSS, and JavaScript can be productive with Vue in a few minutes.
On the other hand, Angular has a vast library and different concepts that you’ll need to learn to properly use the framework (learning Typescript, for example).
Mobile Friendliness
React Native is hard to defeat when it comes to mobile applications as it makes it possible to use the same component model to develop fast-loading, native-rendered apps.
However, a collaboration with Weex is incubating to allow the same functionality with Vue.
That doesn’t mean it’s impossible to create complex mobile applications. If you’re interested in this topic, here are 15 Vue framework components for app development.
Scalability
There’s no denying that Vue.js is smaller in every sense than its counterparts.
React’s active community has made the React ecosystem huge in comparison to the more constrained Vue framework.
Also, being backed by Facebook, React has more resources to grow and expand, making developers more comfortable with its toolings and updates.
The case of Angular is very similar. Created by Google, Angular is constantly updated, improving its performance and functionality.
For these reasons, both React and Angular are widely used in enterprise applications that require a mature framework.
Vue.js, in comparison, is crowdfunded and has a relatively small user base (in comparison at least).
The most considerable tech industry adoption of the Vue framework can be found in China, which has created somewhat of a steep language barrier for English-only developers as more documentation and community discussions are happening in Chinese.
That said, let’s explore the main pros of using Vue for your next project.
Pros of Using Vue.js
Vue is one of the most loved frameworks out there. If you read the discussions around JavaScript frameworks, Vue is regarded as the most friendly and elegant of the three, and it’s not a coincidence.
Let’s explore the main benefits of using Vue for your next website:
Fast Performance
The total size of the framework is around 18kbs – which is already impressive.
In addition, the use of a vDOM allows the application to only update specific components responding to user interaction.
These two combined make Vue applications and websites fast, which is a big perk for user experience and search engine optimization.
Cross-platform Development
Using Electron, you can create desktop and mobile applications using Vue. This allows you to focus on your idea instead of on learning new development tools.
Flexibility
This is one of the characteristics the Vue team has always kept at the core of the framework.
Although you can use Vue CLI 3 for a more constrained development process (this is especially important for large teams and beginners), there’s no one right way to build your apps.
With Vue, you have full control over how you develop your project.
User Friendliness and Low Learning Curve
Unlike other frameworks that require you to learn other programming languages and syntaxes to do advanced programming, Vue only requires you to know the basics of HTML, CSS, and JavaScript.
Also, because Vue is built on top of these technologies, front-end developers will feel at home when writing Vue components.
Component Reusability
Every component is basically a chunk of code that can be reused on different parts of your SPA or website. Because each component can be written in HTML, CSS, and JS, there’s no need to separate each one into different files.
This makes it easier to organize the elements of your application and simplifies maintenance and fixing bugs.
Cons of Using Vue.js
Of course, not everything can be perfect. Like with any other technology, there are always disadvantages that you’ll need to take into account when making a decision.
Too Much Flexibility
Although it might sound weird, sometimes too much freedom isn’t good. The problem with over-flexibility is that it forces developers to make more decisions.
This can slow down production and, if there is no consensus among the team, can cause development styles to clash with one another.
Mostly Adopted in The Chinese Market
When it comes to documentation, discussions, and tutorials, many of these resources are being created in Chinese, making it harder for english-only developers to adopt the framework.
Smaller Plugin and Tooling Ecosystem Compared to Other Frameworks
Because Vue is still a young framework and developed by a relatively small team of developers, Vue’s ecosystem is quite small compared to its counterparts.
Optimize Vue for Search Engines: Getting SPA and Vue Sites Indexed
There are always challenges for JavaScript websites regarding SEO performance, and Vue websites are no exception.
By no means are these the only roadblocks you’ll have to handle to make your Vue project SEO-friendly. However, the optimizations we’re about to explore will ensure that your website is properly crawled and indexed by Google.
Note: For a more in-depth guide on JavaScript optimization, check our guide on how to solve the most common JS SEO problems.
1. Vue Server-Side rendering
When it comes to dynamic pages, the problem is that Google can’t really access the entirety of your content. In some cases, it may even see a blank page.
The reason for that is because the crawler will access your HTML document, but there’s no content until it gets injected by JavaScript.
Although Google has come a long way in solving indexing issues in dynamic pages, other search engines like Bing, Baidu, and DuckDuckGo are not even close to crawling and indexing these pages.
What’s more, other crawlers, like social media crawlers, won’t be able to fetch the necessary metadata to display previews on their platforms.
A way to overcome this limitation is by switching from the default Client-Side Rendering (CSR) to Server-Side Rendering (SSR).
In this scenario, the page is rendered at the backend level, and the resulting DOM is then passed to the user (crawler or human).
To activate SSR for Vue, the first thing to do is to install the vue-server-renderer using the following command:
npm install vue vue-server-renderer –save
Once installed, we can render a Vue instance following this logic:
// Step 1: Create a Vue instance
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()
// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
// in 2.5.0+, returns a Promise if no callback is passed:
renderer.renderToString(app).then(html => {
console.log(html)
}).catch(err => {
console.error(err)
})
Code Snippet from Vue’s Documentation
However, it’ll require a Node.js server which is not always a choice, can become quite expensive, and you’ll lose the advantages of CSR altogether.
Tip: here’s how to set your project to SSR in Nuxt.js.
2. Prerendering with Vue.js
A hybrid choice might be the best as you can keep your website lightning fast – which is one of the reasons to use Vue in the first place – but without compromising the SEO performance of your website.
The simplest way to use prerendering in Vue is by using Prerender.io – we’re actually the official Google recommendation for prerendering services.
Here’s a full guide on how to install Prerender.io in your project.
In simple terms, Prerender will identify each request to your server and send the best response accordingly.
If the user agent is a robot, it will send a static version of the page. If the user is a human, it will send the request via the regular server route.
By switching to prerendering, you’ll improve your Vue SEO considerably by helping web crawlers index your website more easily and providing the best experience to your users.
3. How to Manage Meta Tags in Vue
There’s no denying that meta tags are crucial for your SEO performance long-term.
Meta tags like canonical links, meta titles, and meta descriptions, provide search engines with contextual information about your page.
You can use Vue Meta to handle all meta tags on your pages.
All you need to do is to add the special property metaInfo to every component you’d like to add tags to like so:
// Component.vue
{
metaInfo: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
}
4. Creating a Sitemap with Vue
Sitemaps are a great way to tell search engines what pages you consider to be the most important on your site, help them discover new pages, and just make it easier for crawlers to find all the pages of your site.
To generate your sitemap.xml file, simply install the vue-router-sitemap plugin and follow the instructions.
5. Use History Mode
It’s essential for SEO for your website to have clean, easy-to-read URLs. By default, Vue’s URLs contain hashtags (#). Instead, we want URLs that read like exampledomain.com/about-us.
For this, we can use the following code:
const router = new VueRouter ({
mode: ‘history’,
router: [] //the array of router links
)}
Optimizing your Vue SPA is all about helping search engine crawlers find and understand your page content, while also improving your site’s performance.
Prerendering can help on both fronts by serving the best experience to every user – human or bot. If you have any further questions on how to optimize your Vue project to be SEO-friendly, send us your question on Twitter and we’ll make sure to help.
