I want to render a vue componet from sub directory. I am using laravel 9. I use Jetstream with vue and inertia. By default vue component shows from Pages Directory. I create another directory Admin and put dashboard component in Admin Directory. The problem is when rendering it's didn't show anything.
return Inertia::render('Admin/Dashboard');
I try to render this view. but it didn't show the result. Only show the componet when
return Inertia::render('Dashboard'); render without directory name. How to render a component like this Pages/Admin/Component.vue ?.
I use default configation that jetstream provide.
Related
Im using Laravel 9 with inertia. The design of the project includes modals for creating, updating but i see that inertia doesnt have support for modals?
I have found a few projects for inertia modals but they dont seem to work.
Currently when you navigate using inertia, Laravel hits the route and then in the controller you render an inertia page and vue knows to find a specific page and then navigates to that new page (loads it in a new vue page)
I am wanting to do the same but instead of a new page loaded i want to remain on the same parent page and load the new route content into a modal.
Thanks
If you want a blade view to be loaded inside a modal in an Inertia page you can do:
$modalContent = view('your-blade-view-name', $modalData)->render();
return Inertia::render('inertia-page', $inertiaData);
I created a demo repository for this
I am making some project with Laravel, Vue2 now.
I deployed my project onto the test server, there .svg files display, but in my local environment they don't display.
I use :src="asset('images/ico_arrow_left1.svg')" in vue component.
My images and svg files are all in root/public/images folder.
For example; I wrote the following code to display svg in vue component.
<a #click="previousDay"><img class="ico_ico_arrow" :src="asset('images/ico_arrow_left1.svg')"></a>
The codes are sampe in test server and local.
show in test server, but not show in local, why?
If you want import a file from public folder you should check the documentation. You should use require when you import dynamic asset. Like this:
<img class="ico_ico_arrow" :src="require('images/ico_arrow_left1.svg')"/>
The asset() helper function is only for the Laravel Blade template. you can't use it inside of a regular Vue application.
In Vue, you should use require()in order to solve this problem.
I am using Laravel 8 with Livewire.
My Laravel Livewire application URL is like http://localhost/myproject.
My Laravel Livewire admin panel url is like http://localhost/myproject/admin.
I am fetching problem with anchor tag. When I change the page in pagination the View button URL in Livewire add public is automatically.
My View button code as below:
View
but, link is showing like http://localhost/myproject/public/admin/manage-product/15. That View button link in public is automatically added by Livewire.
How i can remove public from url('/') function?
I attached a screen shot, please check.
Dont forget to add entry point to your project in server settings. and in .env file you should write "APP_URL=http://localhost".
Change the
APP_URL=http://localhost/myproject
Also you can check the official documentation to know more about URL
https://laravel.com/docs/8.x/urls
I'm still learning vue.js and building a laravel/vue.js Ad placement application. I structured my app such that the landing page (a laravel blade view) has a large banner introducing the app and beneath a list of the ads.When a user click on an ad, it takes him/her to the single page of the Ad(this will be a component). My challenge is that I want the app to be a single page application but don't want the banner to show while displaying the single page component. I placed a root component in the welcome view and then inside the component i used router-view to import the components.
My issue is that when I click an Ad, the single page component loads with the banner. How do I make this layout so that the banner doesn't load with the single page component?
One solution would be to put the banner in a vue page followed by the list of ads, then have another vue page without the banner for the ad (pages handled by vue-router)
Another approach would be to have the ad links going to a route that's handled by laravel, then laravel serves a blade template without a banner and with an embedded vue app that just shows the relevant ad.
Vue also supports nested views so if you need several pages with the banner at the top a nested view below the banner in one type of page, and then another type of page with just the ad.
Hope that gives you some ideas to help solve the task.
Further to this: if you're building the ad placement functionality as a tightly coupled part of a whole website, then you might want to have the navbar for the site generated by Vue rather than having it in Blade, i.e. another Vue component for the navbar.
On the other hand, if you're trying to build a reusable Laravel package to do ad placement on any Laravel website, then you'd need to leave the navbar out of your Vue templates, and in your ad module use v-if/v-else rather than Vue-router because you don't want your code to fight the Laravel site for control of the routes.
e.g.
<template>
<div v-if="selectedAd">
//display selected ad
</div>
<div v-else>
//banner here
<div v-for="(ad, index) in ads" :key="index">
{{ ad.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
ads: [],
selectedAd: null,
}
}
}
</script>
vue.js is spa framework not necessary do thing in blade all done inside vue.
search about vue router , vuex ,and do it easy good look.
You can use a v-on:click function of vue and set two variables for the ad and the other for the single page component.
Set the ad variable to true and the page component variable to false and when a use clicks on the ad the function switches the ad variable to false amd the page component variable to true.
I have a set of components, some components include other components via #include('my-sub-component')
The issue is that when I want to use vue I have to put the entire component in the vue.js file inside the template tags.
But inside the template I want to use the #include so I can include some sub components. This does not work.
How can I include blade components inside a vue component?
As far as I know, it's impossible. You can't use PHP (Laravel Blade) .blade.php tags inside Vue Component .js, of course Vue can't execute PHP script in this case. The possible use case is you use the Vue Component inside Laravel Blade.
The closest thing you can get to this is to use inline templates. You can't access blade directives it if you are writing your templates in single file components and compiling them with webpack or something because they are not being rendered with PHP.
You could put the style and scripts components in the SFC though and but in order to use blade directives the template would need to be in a .blade.php file