I working on an app and using Laravel Breeze Vue for the first time. Just some quick background, Laravel Breeze provides some quick scaffolding for authentication. When a user logs in, they are presented with a simple dashboard page. I have added a new link to this page as per below.
app/resources/js/Layouts/Authenticated.vue
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</BreezeNavLink>
<BreezeNavLink :href="route('client.index')" :active="route().current('client.index')">
Clients
</BreezeNavLink>
</div>
I have also created an Index.vue file at file path app/resources/js/Pages/Client/Index.vue. It looks like below:
<template>
<Head title="Clients" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Clients
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
You're logged in!
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script>
import BreezeAuthenticatedLayout from '#/Layouts/Authenticated.vue'
import { Head } from '#inertiajs/inertia-vue3';
export default {
components: {
BreezeAuthenticatedLayout,
Head,
},
}
</script>
I am using a route resource in my web.php file as per below. I have confirmed that client.index is an existing route via php artisan route:list.
//client routing
Route::middleware(['auth', 'verified'])->group(function() {
Route::resource('client', ClientController::class);
});
I am facing two problems. The first problem is that the link will not render in my navigation links. The second issue is that the Index.vue page will not render as well. I have tried doing npm run dev, npm run watch and clearing caches. None of these have worked. Please provide me with some insight on how to address these issues.
This is closed. I'm using old hardware and it was taking time to pick up the changes. npm run dev performed as expected.
Related
I need use vue-laravel-image-crop-upload in Laravel 8.
First step:
Add js script file in my project:
https://dai-siki.github.io/vue-image-crop-upload/example/demo-src.js
Then use this code in html:
<div id="app">
<div class="item">
<img v-if="avatarUrl2" v-show="true" class="avatar" :src="avatarUrl2" style="" />
<my-upload
key="0"
url="/club/uploadCover"
field="avatar2"
lang-type="ar"
:value.sync="show2"
:params="otherParams"
></my-upload>
</div>
<button class="release__buy btn-cover" #click="toggleShow2">Select</button>
</div>
After click select button and select image, Show 419 unknown status.
How to set CSRF token in ajax?
One way is to pass param
#php
$data=['_token'=>csrf_token()];
#endphp
and in vuejs component
<my-upload url="{{route("test")}}" img-format="jpg" img-bgc="#fff"
:lang-ext="{hint: '点击，或拖动图片至此处(*^_^*)'}"
v-model="show1"
field="avatar1"
ki="0"
#crop-success="cropSuccess"
#crop-upload-success="cropUploadSuccess"
#crop-upload-fail="cropUploadFail"
:no-rotate="false"
:params="{{json_encode($data)}}"></my-upload>
Also use core package
Ref:https://github.com/dai-siki/vue-image-crop-upload
You are using fork package(https://github.com/ibohonos/vue-laravel-image-crop-upload) which is not updated one
Also you can route url too like url="{{route("test")}}"
Scripts i used from original package
<script src="https://dai-siki.github.io/vue-image-crop-upload/example-2/vue.js"></script>
<script src="https://dai-siki.github.io/vue-image-crop-upload/example-2/demo-src.js"></script>
If you want to pass using headers then
#php
$data=['X-CSRF-TOKEN'=>csrf_token()];
#endphp
then in component
<div class="item">
<a class="btn" #click="toggleShow2">Set Avatar</a>
<img class="avatar" v-if="avatarUrl2" :src="avatarUrl2" v-show="true" style="display: none;">
<my-upload url="{{route("test")}}"
#crop-success="cropSuccess"
#crop-upload-success="cropUploadSuccess"
#crop-upload-fail="cropUploadFail"
:no-square="true"
field="avatar2"
ki="0"
lang-type="en"
v-model="show2"
:headers="{{json_encode($data)}}"
></my-upload>
</div>
You have to use node package manager or npm to install module
use this command npm install vue-image-crop-upload
Visit Docs
Try
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
as referenced here https://laravel.com/docs/8.x/csrf#csrf-x-csrf-token
I have created a Livewire component in Jetstream and I have set it as a full-page component in the web.php route page as follows:
use App\Http\Livewire\PostComponent;
...
Route::get('posts/',PostComponent::class)->name('posts');
The post-component.blade.php file has originally the following code:
<div>
<h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>
If I hit the URL .../posts I get the following error:
Undefined variable: header (View:
/home/vagrant/laravelapp/resources/views/layouts/app.blade.php)
So I have tried adding the slot in the post-component.blade.php file:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div>
<h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>
</x-app-layout>
Nevertheless, I get that same error.
What am I missing? How do I fix this?
I hope this is a Jetstream project. By default, livewire will use the app.blade.php as the layout. And the component will get rendered in the slot of the app.blade.php.
But since it's a Jetstream project, it has a slot for the header in the layout file.
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
So to resolve this error, there are two approaches.
give the header as the variable for the layout as below in your PostComponent.php
public function render()
{
return view('livewire.post-component')
->layout('layouts.app', ['header' => 'Post Compoent Page']);
}
Create your own layout and only have a slot. (imagine mylayout.blade.php)
<head>
#livewireStyles
</head>
<body>
{{ $slot }}
#livewireScripts
</body>
and use that layout when rendering the livewire component
public function render()
{
return view('livewire.post-component')->layout('layouts.mylayout');
}
There is a github issue regarding this topic (a closed one). But keep an eye on it. since Jetstream is in it's early stages.
I'm getting stuck in an ecommerce development project using Laravel and Vue. I can't make the images appear dynamically in the index view of the product. I'm able to upload and print the images in the show view and these are stored in storage / app / images.
The problem is that the image_url attribute of a product is nullable so it may or may not have an image and the idea is to show them when they have one.
Here is the code of the component ProductCardComponete.vue that is where I develop the code itself.
<template lang="html">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card">
<header class="bg-dark padding">
</header>
<div class="justify-content-center">
<!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension">
-->
<img :src="'/productos/images/34.jpeg'" class="card-img-top">
</div>
<div class="card-body padding">
<h2 class="card-title">
<a :href="'/productos/'+product.id">
{{product.title}}
</a>
</h2>
<h4 class="card-subtitle">{{product.humanPrice}}</h4>
<p class="card-text">{{product.description}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
product: {
type: Object
}
}
}
</script>
Of course, when I put the route in a static way, it works. But I don't know how I could arrive at the solution to show it dynamically and the way of showing the image if the product has one.
Finally here is a link to the github Repo of the project just in case.
Github Repo
Images should be saved in storage/app/public/ and you should make a symlink so that you can access storage folder in public folder. Otherwise you will stuck in accessing images. Read this official doc.
I have a Laravel / Vue app that I'm building and I've run into a bit of a snag. I have been able to successfully create individual stand-alone components, however when I try to nest a stand-alone component into another component, only the nested component shows up. A bit of code:
CompanyLogo.vue
<template>
<figure class="company-logo" :style="{
width: size,
height: size,
backgroundImage: `url(${src})`
}"></figure>
</template>
LogoUploader.vue
<template>
<div class="logo-container">
<company-logo size="65px" :src="`${company.logo.url}`"></company-logo>
</div>
<div class="logo-uploaded-details">
<p>Last updated: {company.logo.last_updated}</p>
<button class="file-browse-btn">Upload Image</button>
</div>
</template>
What's happening is that when in company.blade.php I simply have
<logo-uploader></logo-uploader>
The app compiles and loads, however only the CompanyLogo shows up on the screen. The entire markup for the logo-uploaded-details section isn't rendered at all.
I have tried adding a require for the CompanyLogo component to the registration for the LogoUploader component, but that didn't work either.
If I split out the components they both show up. The issue is only once they're nested.
Any ideas?
Vue instances and components must have a single root element. In your LogoUploader you have two root elements.
You need to wrap them in a root.
<template>
<div>
<div class="logo-container">
<company-logo size="65px" :src="`${company.logo.url}`"></company-logo>
</div>
<div class="logo-uploaded-details">
<p>Last updated: {company.logo.last_updated}</p>
<button class="file-browse-btn">Upload Image</button>
</div>
</div>
</template>
Per the docs, this should be enough to run Twitter Bootstrap:
<div class="carousel">
<div class="carousel-inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
$('.carousel').carousel()
I also included jquery.transitions plugin so I assumed it would degrade in older browsers.
Unfortunately, the slides don't move at all in Firefox 3.6. Why?
It looks like you need to add slide class to your carousel for the simple version to work:
<div class="carousel slide">
Sample carousel has it, and there is a check in the code:
if (!$.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger('slide')
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Kind of strange they didn't mention it, though.