The day that all my problem was a simple comma

What is the router in Vue?

The Vue Router is the navigation mechanism between screens (views) in your single-page application (SPA).

It is responsible for:

1 - Managing routes (URLs) within the app

2 - Displaying the correct component according to the accessed address

3 - Allowing navigation without reloading the page

How it works in practice?

Without the router, Vue only renders a single component — App.vue.

With the router, you define something like:

{ path: '/login', component: LoginView }
{ path: '/register', component: RegisterView }

That means:

When the user goes to /login → Vue displays Login.vue

When the user goes to /register → Vue displays Register.vue

And Vue Router does all this without reloading the browser, simply swapping the component inside the .

So, what was my problem?

I switched my app from MLA to SPA, and suddenly the page stopped rendering.

After full a investigation, checking all route file, main file, etc, I finally figured out the issue, I imported a file with a tiny mistake.

In StockService.js, there was missing a comma in the header between Content-Type and Authorization.