How to install vue-router 4 in vue ^2.6.14 version - vue.js

Hi i have a requirement to use vue-router4 on vue:^2.6.14 app because i want to use the latest api regarding dynamically registering a route.
Problem: i tried to move vue:^2.6.14 app to vue:3.*.* as there is a requirement of using new vue-router api which supports https://router.vuejs.org/guide/advanced/dynamic-routing.html#adding-nested-routes based on that i asked a question which is un-answered Dynamically registered route is not working when it is just pushed
Note: i tried for complete migration but facing so many errors
My Expection: i want to use vue-router#4 in vue:^2.6.14 only for addRoute('parent',{...Route Object}) method https://router.vuejs.org/guide/advanced/dynamic-routing.html#adding-routes if overriding is possible to get this feature in vue-router3 for vue2 then it is most welcomed!
Note2: after overriding it should work as this example https://codesandbox.io/s/vue-router-test-hvzes5?file=/src/main.js , Note: in main.js only 2 routes are defined.
Issue with vue-router3 for vue2: https://github.com/vuejs/vue-router/issues/1156
Please help me thanks in advance !!

It's not possible to use vue-router#4 with vue#2. They're incompatible with each other.
And the question assumes that addRoute is only available in vue-router#4, but that's not true. addRoute() was introduced in vue-router#3.5.0, which is compatible with vue#2.
Based on your other question, I think the confusion might be caused by the answer you linked, which only applies to vue-router#2, which does not support addRoute. The workaround provided in that answer would not work properly with vue-router#3, as you had observed.
Here's a demo of your Codesandbox written in vue#2.6.14 with vue-router#3.5.4. Your original code to dynamically add routes was untouched.

Related

MobX 4 `decorate` doesnt work with `computed`

EDIT: this is now solved and i no longer need help. see solution below. thank you
I am getting a weird error when trying the new decorate syntax with computed variables - any idea why it might sometimes invalidate the store? I'm pretty sure the computed is causing this as it works when I remove it.
sandbox here: https://codesandbox.io/s/jnmz0v2189
and screenshot here:
i should use decorate on the class, not the instance.
https://twitter.com/askerovlab/status/974752575676436481
more info here.

Mock Illuminate Config facade without Laravel

I'm working on a package that relies on the Config facade.
The code itself works fine, but I'm encountering issues when testing.
Initially, I was using this code:
Config::shouldReceive('foo.bar')
->andReturn(true);
As many others, I bumped into some issues.
I later read that mocking the Config facade isn't encouraged.
To get around it, most people tend to suggest to use the following instead:
Config::set('foo.bar', true);
Which I reckon works fine, if you're testing from Laravel/Lumen.
But my issue is, I'm not. I just rely on a few Illuminate packages, so that won't work since I get:
RuntimeException: A facade root has not been set.
At this point, some might suggest that I should just inject the Config repository dependency, but I'm using the Config facade in a trait which is used by an Eloquent model, so DI won't work.
Is there any other way I can tackle this?
Thanks!
PS: This question has also been posted on Laracasts
I faced to the same issue. Lumen 5.4
using Config::set('key', 'value') was not worked. So I had to use this way.
//test
use Illuminate\Support\Facades\Config;
Config::shouldReceive('get')
->once()
->with('key')
->andReturn('value');
,
//code
use Illuminate\Support\Facades\Config;
Config::get('key'); //instead config('key');
For those running into a similar issue, I've finally found the correct way to address this problem.
Testing Laravel packages is just what the Testbench package is for.
From the documentation:
To use Testbench Component, all you need to do is extend Orchestra\Testbench\TestCase instead of PHPUnit\Framework\TestCase.
This way, setting a configuration value is just a matter of calling Config::set() as you would on a full Laravel install. No more Mockery issues.

How to distinguish between component instances in Vue Devtools

When I look at my application state in Vue's devtools chrome extension, I can see multiple instances of the same component in the tree view. However, there is no way to distinguish one instance from another. For example, in the screenshot below there are three <Todo> components. Imagine instead there are 30. How do I attach some kind of instance name or id to my components? It seems silly to have to click through 30 components to find the one I need.
I had the same idea also a couple of months ago.
So I gave it a try.
My PR has been submitted: https://github.com/vuejs/vue-devtools/pull/331
It's probably a bit early to rely on my solution since the core team could still reject the PR or request other naming conventions.
Until then you can build my proposal version yourself from my repo:
https://github.com/nerdyglasses/vue-devtools/tree/verbose-component-tree
Is that helping you?
Best, Christian
You can use the ':key' attribute. And you even HAVE TO use it if your component depends on a v-for loop.
here you can see the keys

What's the right way to make pickadate play well with browserify?

I've been struggling and very frustrated because I can't find a way to make pickadate play well with browserify. I'm migrating a Backbone app from AMD but pickadate seems impossible to work with it. I must say that I began to use browserify recently so I'm not an expert but I could migrate the rest of my code without any major incident. Of course I'm open to receive some tips and references to master browserify :)
I have jquery and pickadate installed via npm and when trying to use pickadate I'm getting the classic error:
undefined is not a function
I used this way of requiring (note the use without assigning the require to a variable):
require("jquery");
require("pickadate");
I saw this on an answer here at stackoverflow (Requiring pickadate.js with Browserify) but it doesn't work in my case.
Any help or reference about where to find help will be pretty much appreciated.
The current version of pickadate as a module only exposes the instance of PickerConstructor but it doesn't expose DatePicker neither TimePicker so every time we try to instantiate a date picker or time picker we got the error undefined is not a function because neither of them have been loaded and so no jquery.extend invocation have been made to append them to the jQuery object.
What is needed is some kind of facade / wrapper to expose all the pickadate functionality out of the box.
For this I made some small changes directly to the pickadate code base. I added an index.js that works as the facade / wrapper for picker.js, pick.date and pick.time, allowing them to be used out of the box with Browserify by issuing the typical require('pickadate'). It doesn't need to be assigned to a variable since pickadate attaches itself directly to the jQuery object. You can check this gist with the index.js code I used
This change is a copy of the way the CryptoJS library by #evanvosberg exposes its different algorithms through the same pattern implemented in its index.js file.
The only additional change would be to modify the property main in pickadate package.json to point to index.js.
I've just send a message to #amsul, the pickadate author asking for the possibility of integrate this changes directly into the pickadate github repo.
I hope people trying to use pickadate with browserify can find this solution and stop getting frustrated trying to make them play well together!
Greetings to everybody!

AttributeRouting v3.5.6 prefixes and areas not being applied to routes

I've added Tim McCalls AttributeRouting v.3.5.6 via the NuGet package. It seems straight forward enough, but area names and routeprefixes are not being applied to the routes shown in routes.axd.
Has anyone else experienced this?
I found the issue. It is a naming conflict. It appears that RouteArea and RoutePrefix are seen as objects in the System.Web.Mvc namespace, hence are not being applied to the AR routes.
This has been reported to Tim McCall, but he is to busy to work on the AR library anymore. You can see the comment thread here.
I want to be able to use the AR library with MVC5. Namely, because I want to take advantage of the precedence options. If you want to do the same then the following using statements and the conflict seems to resolve.
using AttributeRouting;
using AttributeRouting.Web.Mvc;
using RouteAreaAttribute = AttributeRouting.RouteAreaAttribute;
using RoutePrefixAttribute = AttributeRouting.RoutePrefixAttribute;