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

f4ban — Tue, 30 Jun 2026 16:01:31 +0000

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.

Introducing codespaces.el: The Best Way to Use GitHub Codespaces

f4ban — Sat, 28 Feb 2026 15:41:09 +0000

If you're an Emacs user and a fan of GitHub Codespaces, I have great news for you! I've taken over maitenance of:

f4ban / codespaces.el

Emacs support for easy access to GitHub Codespaces.

codespaces.el

About

This package provides support for managing GitHub Codespaces in Emacs and connecting to them via TRAMP. It provides a handy completing-read UI that lets you choose from all your created codespaces.

Here is an example use-package declaration:

(use-package codespaces
  :config (codespaces-setup)
  :bind ("C-c S" . #'codespaces-connect))

You will need to:

Have the GitHub command line tools (gh) installed

If you use use-package-ensure-system-package, Emacs can install this for you automatically:

(use-package use-package-ensure-system-package :ensure t)
(use-package codespaces
  :ensure-system-package gh
  :config (codespaces-setup))

Authorize gh to access your codespaces:
- Running gh codespace list will verify if permissions are correctly set.
- You can grant the required permission by running gh auth refresh -h github.com -s codespace.

Because the TRAMP package, which underpins this package’s functionality, connects to remote servers over SSH, your codespace needs to have an SSH server…

View on GitHub

What is codespaces.el?

codespaces.el is an Emacs package that enables seamless interaction with GitHub Codespaces. If you're unfamiliar Learn more about codespaces here.

With this package, you can interact with your Codespaces directly from within Emacs, whether it's creating a new one or connecting to a existing codespace, all from the comfort of your favorite editor.

Key Features:

Connect to Codespaces via Emacs TRAMP
Create new and delete old Codespaces
Start and stop Codespaces

Contributing

If you’d like to contribute to the project, feel free to create issues and submit a pull request! I’m always open to new ideas and improvements.

Links:
Melpa
GitHub

DEV Community: f4ban