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> 

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 } ] 

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

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>
 

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