I have a strange error on a project of mine.
I'm trying to switch a laravel project to something where the backend is seperated from the frontend.
Backend api stays laravel, but frontend is vue with quasar.
Since we want to do the change gradualy, i made one new feature in quasar and want to integrate it in my existing laravel-app.
In order to accomplish that, i'm using an iframe in which i load the new vue frontend.
Everything works as it should work, except for one crucial thing.
I have one id-parameter from laravel that should be passed to the iframe (the quasar/vue application), and for some reason... that's not working.
I've tried to work with route parameters
<iframe src='/spa/12'
and in vue-router
{ path: '/:id', component: () => import('pages/weekSchedule.vue') }
Without success
I've tried query parameters in the url like this
<iframe src='/spa/index.html?id=12'
I can see the correct url in my network inspector, the url is called with the query, but i can't seem to get the parameters in vue.
async mounted() {
this.id= this.$route.query.id
}
When i test it -not in iframe- everything is working.
But in iframe i get nothing.
Does anybody have an idea/solution?
Any help is appreciated!
Related
I have page that has v-tabs using the nuxt attribute, each tab directs to a dynamic route
cars/_brand_name/index.vue (making the _brand_name a mandatory parameter)
When I load the page /cars/bmw: mounted get's called successfully but after switching to other tabs the URL updates correctly but the page no longer re-renders, mounted no longer getting called.
Am I missing some part of the lifecycle? Should I be watching the route param and force the page to reload? I don't remember needing to do this with Vue alone.
This is often caused when the route component is the same as previous route. The best way to force Vue to re-render the page is to set a :key attribute on the router with a unique value, it is common to use $route.fullPath.
Update your router view like so.
<router-view :key="$route.fullPath"></router-view>
I have been trying since weeks now to debug my laravel/vuejs app with absolutely no success, so I am trying to understand what happens . I am debugging the "old way", displaying errors manually... And I get a bit crazy :)
PHP debugbar seems fabulous but for some reason it only shows up when I have a 404 error... I Would like to see it all the time.
Also, "dd()" juste doesnt do anything when I do for example:
public function emailexists(string $email){
dd($email);
//this doesn't work either
var_dump($email);
die();
}
I guess there is something I forgot. I am a beginner with PHP.
EDIT: could it be because I am using VueJS ?
EDIT2: after Thomas' answer :
I guess the lifecycle is ended correctly (unless I need to do something specific? I am just calling my PHP controller through axios from my vueJS view)
But here is my view.blade, could it be the issue?
#extends('template')
#section('content')
<div id="app">
<vuecomponent ></vuecomponent >
</div>
#endsection
The debugbar gets added at the end of the request lifecycle (after middleware). Failing to properly end the lifecycle the intended way will yield the result of not having a debugbar. Both dd and die are PHP functions that stop execution immediately.
As for VueJS:
Vue itself will not show the debugbar, just because Laravel is installed next to the Vue entrypoint.
That doesn't have to be a problem if you use a (Blade) view to setup Vue. However if you bypass Laravel entirely on DOM output, that yes the debugbar won't be part of it.
When you use PHP, Laravel or Vuejs all dd() or var_dump() would be useful if you can track your requests. May you just need to use a browser inspector which could show you requests responses.
I want to implement react js to different pages of my website,
e.g
in home page, registration, login, etc.
all tutorial i have seen it only uses 1 app.js how can i achieve this
to multi page app.
P.S i am using laravel elixir and i combine them into 1 main.js.
Add a mounting point in the pages that you want your React App to be mounted.
e.g.
// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );
// rendered HTML from pages should have
<div id="mountingPoint"></div>
I found this https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points
I think this is more appropriate on what i need and then i will just map the file
name in my laravel app.
this way i dont need to load the js code for contact_us.php to login.php
You could also use something like React Habitat to make this architecture easier.
With it, you could just define a container of your components so they resolve in your DOM.
For example, in your javascript you would do
import MyComponent from './Components/MyComponent';
...
container.register(MyComponent).as(myComponent);
Then in any of your HTML pages
<div data-component="myComponent"></div>
It also supports multiple containers and async code splitting.
I've been playing with AngularJS for a few weeks and feeling like I'm learning a lot more about SPAs. Given that Angular is front-end and requires a third party data source to get stuff from a database I have used the WP JSON plugin and am now trying to make it work on my Wordpress site.
So far, I have done this which gets the posts and puts them into the template:
$http.get('http://site:8888/wp-json/posts')
.success(function(data, status, headers, config){
$scope.items = data;
})
Great, works well. Now I want to link my posts to an individual post page, and I'm completely stuck as what to use for my templateUrl (if this is even needed):
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider
.when('/:category/:post', {
templateUrl: ?????
});
}])
The conflict here is that WP already offers routing. But I need to almost sidestep it so I can get AngularJS working to do AJAX loads for me. Any ideas?
With a SPA you won't need wordpress routing at all. Wordpress will be just the dataprovider for your frontend. Your question really is not about using wordpress and angular but "How to use ngRoute?".
There's a great example on how Routes work in angulars developer guide: https://docs.angularjs.org/api/ngRoute/service/$route
To answer your question: templateUrl is a path to an Html file that contains the template for your post. Angular lazyloads that file using $templateCache and evaluates it. So you could initialize a Controller there that would get data from wordpress and so on.
I have a SPA using kendo router.
The spa is working fine when I navigate between different routes. But when I navigate to the same route that I am already on, nothing happens so the data presented is not updated.
For instance:
I am at: http:localhost/MyApp#/MyPage
If I do:
//Change some data...
myRouter.navigate("/Mypage");
nothing happens.
The callback defined by:
myRouter.route("/MyPage", function(){
//this is not executed when I navigate to the same page
});
is not fired.
How can I force to navigate in that condition (to the same page)? Or am I missing something?