In laravel I have a vue.js main view template, what i want is when i click on main template this displays the child model
//my main template
<template>
<div>
<ul>
<li #click="chatWith()"></li>
</ul>
</div>
</template>
<script>
export default {
methods: {
chatWith(){
return {
template:<conversation-with></conversation-with>
}
}
},
}
</script>
but is not working, another code is working on click, but goes to template isn't
If you want it to route to a new page you need to create a route that points to that template somehow. You can either set up that template on a blade and use laravel's routing in web.php to create a route for it, then link to it like a normal <a href="/chatWith">, or you can similarly create a route using vue router instead, which would allow you to have single-page apps with better routing control.
https://laravel.com/docs/5.8/routing (make sure it's your correct laravel version)
https://router.vuejs.org/guide/
if you need it to be some kind of modal or something that's another story though
Related
I have installed Laravel script which has his own front page (homepage) which i dont like and wanted to replace with my own html. I moved css, images to public folder, renames index.html to index.blade.php (moved to resources/views) and added routing - Route::get('/index2', function () {return view('index2');}); but it does not load my homepage. I changed all links to css inside my home.blade.php like this - /assets/css/styles.css" rel="stylesheet"> .
There is an existing routing -Route::get('/','HomeController#index'); which loads old homepage. Do i remove it or leave it be?
And why it's named different - homecontroller#index?
Thank you for your help!
First of all, remove the default Route from web.php and Add below code
Route::get('/', function () {
return view('index'); //Change blade as per your file name
})->name('home');
homecontroller#index This is the default controller and index method which you get. Basically in index method returns the default welcome page blade. You can use that as well if you want.
Divide your HTML code into Separate small components. So you can extend the same code in different files.
Use a named route instead of a direct URL in like this.
Is it possible to make every view extend my main layout without having to put #extends('layout') and #section('content') in every file at the top? For example by using a provider? I'm new to Laravel and Blade.
Actually its better to use extend but in case you want to get rid of #extends or #section, you can always return your main layout from controller and pass views as parameters to the main layout.
mainlayout.blade.php:
//replace yield directive with content variable
// #yield('content')
{!!$content!!}
in controller:
//return view('test');
$content=view('test')->render();
return view('mainlayout',['content'=>$content]);
Now in test view you don't need #extends and #section.
We have a Laravel app that has a nav bar on the main page that links to different areas on the site like this:
<li class="{{ activeLink(['admin/orders', 'admin/orders/open', 'admin/orders/fulfilled']) }}">
<a href="/admin/orders/new">
</li>
and the route is mapped as follows: Route::get('admin/orders/new', 'Admin\OrdersController#new');
OrdersController
class OrdersController extends Controller
{
public function new() {
return view('admin.orders');
}
}
and this is where I removed the previous blade code and inject the Vue entry point:
Orders.blade.php
#extends('layouts.admin')
#section('content')
<div id="app-orders">
</div>
The issue I'm having is that I'm gradually replacing blade files with Vue, I am having to make 'new' Vue apps since there is no common entry point. So right now I am looking to replace the Support page, which means I'll have to add an entry point on the support.blade.php like:
<div id="app-support">
</div>
Ideally, I'd like to obviously replace the whole admin section and use Vue but the CTO wants to do it gradually so I'm wondering if this is the best approach or is there another way I can be doing this?
I have an application with a Laravel back-end/React.js front-end. I am using react router so to make that work I have any path pointing to the Controller which loads the view with the components in them. However when I add nested routes in the react side i.e. "blog/:blogId", it seems that it completely skips the tag in which components are loaded into and shows me content from the Laravel view instead.
I originally had:
`Route::get('/{slug?}', 'ProjectsController#index'`
I've tried:
`Route::any('{path}', function($path){
$projects = Project::all();
$posts = Post::all();
return view('welcome', compact('projects', 'posts'));
})->where('path', '.*');`
This won't work either:
`Route::get('/{slug?}/{id?}', 'ProjectsController#index'`
What I want is for both /blog and /blog/2 to go to ProjectsController#index which loads the view with the react tag.
The data in my index function in ProjectsController is:
`$projects = Project::all();
$posts = Post::all();
//return $projects;
return view('welcome', compact('projects', 'posts'));`
Has anyone come across this before? Thanks.
UPDATED:
The welcome view being returned by the controller index method:
The <div id="content"></div> is where my base component is being loaded into. So when navigating to route '/blog' I see my component, when navigating to '/blog/anything' I see Laravel's login and register links.
`#extends('layout')
#section('content')
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif
<div id="content"></div>
#include('partials._scripts')
#endsection`
The component making use of the link:
`View here
<Route path="/blog/:blogId" component={Post} />`
My other routes in the base component:
`<Switch>
<Route exact path="/" render={(props)=> <Home text={text} mobileNavIsOpen={hamburgerOpen} backgroundImage={background}/>} />
<Route path="/projects" component={Projects} />
<Route path="/blog" component={Blog} />
<Route component={NotFound} />
</Switch>`
I've tried placing the /blog/:blogId route in the base app along with the others - still no difference.
UPDATE:
When removing the /blog/ route tag from react router and just keeping '/blog/:blogId, it has the same effect.
UPDATE/PARTLY SOLVED:
Adding (\\d+) to my react router path: path={/blog/:id(\\d+)} rightly took me to the nested component. It did also load the blade view content, however, so as a temporary fix I have taken out the blade content that was displayed. Would be good to see if anyone has another way around it. Thanks.
Try this
Route::get('/{any}', 'ProjectController#index')->where('any', '.*');
This is basically added to the end of the routes/web.php, since most probably you are trying to build a SPA and you want all http requests to be handled by react router.
Update:
Based on your updates I understand that you want both /blog and /blog/:ID to be handled by the same method. That can be done like this
Route::get('blog/{id?}', 'ProjectController#index')->where('id', '[0-9]+');
If you need the ID in the index method give it as the first argument to the method and send it to the view.
I am new to web development.I am using laravel for my app where i used blade templates for creating pages.I have a main blade in which my header and footer exist and i am using it as wrapper.I want all of other pages to be open in that without reloading that base template and when i open the page it extends the main wrapper with new view correctly but when i update that page's content with ajax content of that page doubles the footer that may be because #includes() that creates a new page within existing one but i want to fix that double content and footer.Please help!Here is the code of pages that i used to load within the main wrapper
#extends('wrappertemplate')
#section('content')
<div class="body-content">`
And the content is here
</div>
#stop
I would advise that unless it's a very simple use case/playground exercise, that you don't do it this way, and instead define a proper API using Laravel, then use a front end framework like React, Angular, Ember etc etc. to interact with this API and handle DOM manipulation/creation. Seems v bizarre to re-render the entire page using HTML loaded of Ajax. There are plenty of tutorials on using Laravel and Various Front End Frameworks
However, for what you asked, you need to first create a page that extends wrappertemplate which you have. This should load without any content in the body
Then create a blade file which has the html that you want - it shouldn't extend anything. Then you just have a route and controller method which returns the contents of this file.
Then all you have to do is get your HTML over ajax and append it to the body.
This is just a sample controller:
class PageController extends Controller
{
// This is your method which renders the page that is essentially a wrapper
public function home()
{
return view('pages.home');
}
// This is your route which returns a partial, i.e. the content which gets refreshed
public function content()
{
$html = view('partials.home-content')->with(['name'=>'ExoticChimp'])->render();
return response->json(['html' => $html]);
}
}
Then your views:
<!--pages.home-->
#extends('wrappertemplate')
#section('content')
<div class="body-content">`
And the content is here
</div>
#stop
<!--partials.home-content-->
<h1>Hello {{$name}}</h1>
Then you'd just append the html parameter in the response to your body-content using basic jquery or js. I'm not going to write the JS as well, just google making AJAX requests using jQuery and there are a ton of articles on this stuff. I must stress though that you should look into using Laravel + a front end framework.
Tutorial: http://culttt.com/2015/04/06/getting-started-with-laravel-and-ember/
You should read up on the Laravel documentation for controllers.
http://laravel.com/docs/5.1/controllers