DEV Community

Cover image for Quick fix to empty page and noscript serving a Vue App
Mattia Orfano
Mattia Orfano

Posted on

8 1

Quick fix to empty page and noscript serving a Vue App

Hey everyone, another #10stips today.

What is #10stips? The column where you solve coding issues within 10 seconds and prevent your mental health.

Basic stuff here, so if you're an advanced javascript/Vue developer, and don't want to laugh out loud, just skip this.

I decided to publish it anyway because the answers on StackOverflow to the same issue wasted my time.

The solution was way easier that I felt like an idiot.

In fact, it was my fault... but it seems it happens a lot since there are many similar requests on the internet.

So, this might be helpful.

The issue with App.vue

Look at this basic Component:



<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |

    <!-- same as previous because router-link always look for a name attribute inside the routes object -->
    <router-link :to="{ name: 'About' }">About</router-link>
  </nav>

  <!-- a component from the route will be injected here (eg /about) -->
  <router-view />
</template>


Enter fullscreen mode Exit fullscreen mode

We have 3 router-links. The second and third loads the same About view... but instead of a string I am passing an object with a name attribute.

This is possible because Vue looks for a name attribute inside each route object. These are the routes:



const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]


Enter fullscreen mode Exit fullscreen mode

If you run the app with npm run serve you end up with a blank page (wtf!!).

Vue blank page

Inspecting the code you see this:



<noscript>
<strong>We're sorry but demo-jobs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>

Enter fullscreen mode Exit fullscreen mode




Quick fix with explanation

Did you spot the difference?

In the routes I have
name: 'about'

while in router-link I wrote
{ name: 'About' }

yes ;) a typo. the string doesn't match. must be lowercase.

But the behavior of Vue interpreter is strange and you don't have clear errors on console. An headache will arise.

Now that I saved your life, leave a thumbs up :)

See ya next time,
Matt

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
fonsor17 profile image
Fonsor17

You saved my morning. Grazie mille!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More