Please support Vue.js

[thangman22]

Vue.js is the one of popular framework please support

[mgechev]

That's on the roadmap!

[addyosmani]

👍 We definitely want to. I think there would be value in us looking at how statically analyzable apps generated using Vue CLI 3.0 are. We effectively need to support Vue parsing in https://github.com/guess-js/guess/tree/master/packages/parser.

Some questions we can explore:

• Does vue-router support a way of determining/parsing out all routes in an application?
• Would attempting to analyze instances of VueRouter in applications be enough to generate this list (especially if we wanted to read all your nested routes)?
• Would we need to parse each <router-link> in your .vue files statically to generate such a list?

We might ask @yyx990803 his thoughts here sometime :)

[yyx990803]

Vue Router route configurations are centralized and quite similar to that of Angular's (if the API hasn't changed that much) and should be quite easy to parse statically:

const router = new VueRouter({
  routes: [
    {
       path: '/',
       component: () => import('./SomeComponent.vue'),
       children: [
          /* recursive from here */
       ]
     }
  ]
})

I guess the potential edge cases would be:

• How to identify the routes array, since in some cases the user might be exporting the routes from one file and instantiating the router in another file.

• The path can be patterns (compiled via path-to-regexp). I guess you probably already have some way to handle this.

[mgechev]

@yyx990803 thanks for the response!

Another potential problem I see is if the path value or the dynamic import argument is not a string literal but a variable/constant reference.

The Angular compiler solves this for us for free because it performs a partial evaluation of "foldable" expressions.

A potential workaround that I see is using prepack. I haven't done an exhaustive research but my intuition tells me that if we're able to evaluate a subtree of the file's AST, we might be able to get the value of the path, as well as, the one of the dynamic import even if they are complex expressions.

Such approach should be even applicable to the first edge case you mentioned:

How to identify the routes array, since in some cases the user might be exporting the routes from one file and instantiating the router in another file.

For the second edge case:

The path can be patterns (compiled via path-to-regexp). I guess you probably already have some way to handle this.

We currently map GA paths to routes by recognizing the routing parameters. There's still some testing left to make sure we're covering most edge cases but the general approach is clear.

I'm curious, does Vue allows defining routes at runtime? If that's possible, we may need to change our approach a little.

[mgechev]

We have Nuxt support. With runtime.delegate, you can already use this with Vue as well.