Why Your Vue.js Site Isn't Ranking on Google

#nuxt #vue #webdev #seo

You built a beautiful Vue.js SPA. Smooth transitions. Reactive components. Elegant code.

Then you launched it ... aaaaand Google ignored it.

The problem isn't your code. It's that Googlebot doesn't run JavaScript the way a browser does. Your carefully crafted SPA delivers an empty <div id="app"> to crawlers. No content, no headings, no links.

If Google can't read it, nobody finds it.

The Problem: JavaScript-Framed Content Is Invisible

When you ship a client-side rendered Vue app, this is what Googlebot sees:

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

Everything is generated inside app.js.

For a business website, this is a nightmare. If your content isn't in the initial HTML, you're almost invisible to crawlers.

Nuxt Static Generation: Ship Real HTML

Nuxt (the framework built on top of Vue) can pre-render every page at build time. The output is plain .html files.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'static',
  },
})

That's the core config. Run nuxi generate, and Nuxt crawls every route, executes your components, and writes out static HTML files. What Googlebot sees is identical to what a user sees.

This is the exact setup I use for fm-netz.de - my own hosting and webdesign business for small German companies.