Are you a web developer who loves using Vue.js? If so, you’re not alone; Vue.js is one of the most popular front-end JavaScript frameworks around. However, there’s one big downside to using Vue.js for your web development projects: Google does not index Vue.js web pages.

That’s right; if you want your site to be visible in Google search results, you need to use a different framework. This is the case, in fact, with any other front end frameworks like Angular or React.

But don’t worry; there is a way to use Vue.js and still make your site indexable by Google. The solution is to use Nuxt.js, a server-side rendered framework that is based on Vue.js.

In this blog post, we’ll discuss why single page apps are not indexable by Google, and how you can use Nuxt.js to create an SEO friendly website using Vue.js.

Why are SPAs not indexable by Google?

Have you ever inspected the HTML markup of an SPA built with any modern front end framework? If you have, you’ve probably noticed that you can’t really see any of the elements that compose your apps. Instead, you will only see a single <div> element.

Why is that? The reason is that SPAs are created using JavaScript, and the content of your app is generated dynamically by this language. This presents a problem for Google, because its bots can’t execute JavaScript when they crawl your site. Consequently, they can’t see (and therefore index) the content of your SPA.

This means that Google’s crawlers are unable to access the content of single page apps, which makes them invisible in search results.

So, if you’ve built a web app with Vue and you want it to be able to rank on any search engine, you’ll need to find a workaround. However, there is a pretty simple and elegant solution: use Nuxt.js.

How to make a Vue.js SPA indexable with Nuxt.js

Nuxt.js is a framework that is based on Vue.js, but it has one key difference: it generates static web applications. This might sound counterintuitive at first, but it actually makes a lot of sense.

The reason is that, since Nuxt.js apps are static, they don’t need to rely on JavaScript to generate their content. Instead, the content is generated at build time and then served to the user as HTML.

This might sound like a pretty big limitation, but it’s actually not. The vast majority of web applications don’t need to dynamically generate their content on the fly; they can do it at build time just as easily.

Of course, there are some exceptions to this rule, but in most cases, you’ll be able to use Nuxt.js without any problems.

So, remember what we just told you about the content of a Vue app being generated in real time by JavaScript? Nuxt.js solves this problem by generating your HTML pages in advance on the server side for each route in your app.

This means that each page in your app has a unique URL, and all of its HTML markdown visible, which can then be indexed by Google’s crawlers. Additionally, Nuxt.js comes with a number of features that make it ideal for developing SEO friendly websites, such as:

• Automatic code splitting so that every page in your app loads only the necessary JavaScript, CSS, and HTML needed to render that page (which reduces page load times).
• Pre-rendering of pages (which means that Nuxt automatically generates static HTML files for each page in your app)
• Ability to add custom metadata to each page (which allows you to control how your pages appear in search results).
• And much more!

In short, if you want to create an SEO friendly website using Vue, the best way to do it is to use Nuxt. With this framework, you get all the benefits of using Vue (like the speed with which you can build your apps), plus the ability to create websites that are indexable by Google.

So, how do you create a Nuxt app?

Another cool feature of Nuxt is that you don’t even need to install a new package on your computer. You can instead use NPX, which allows you to create a new Nuxt project directly from the command line.

To do this, just open your terminal and type the following:

npx create-nuxt-app <app-name>

This will start the process of creating a new Nuxt app. You’ll be asked a few questions about your project, such as its name, author, etc. Once the process is finished, you can run your new app using the following command:

npm run dev

At this point, you can simply start working on your app as you’d do if you were using plain Vue. However, you will also have access to Nuxt’s other functionalities, like its awesome router system.

Once you’re done, you can generate your static assets by using the following command:

npm run generate

And that’s pretty much it! Of course, there’s a lot more to Nuxt than what we’ve just covered, but this should give you a pretty good idea of what it’s all about.

Final thoughts

Nuxt has quickly become the go – to solution for developers looking to create Vue – powered SSR apps that are also indexed by Google.

And it’s easy to see why; with featureslike automatic routing and pre – rendering, Nuxt makes it easy to create fast – loading apps that still get indexed by the world’s most popular search engine.

So if you’re looking to create an SEO friendly website using Vue, we hope this article has been helpful!

👋 Hey, I'm Alejandro Rodríguez

Hey there! I'm a front end developer from Spain and a web dev teacher at Ironhack. I've been writing for more than 7 years as a side project, and I love to mix both disciplines whenever I can. Besides working, I'm also passionate about travelling (often with my laptop as a digital nomad) and water sports. What could be better than writing about code in a Caribbean beach, or from a coworking space in an european city?