I am working in Laravel , and Vue components are showing/updating in local but not showing in server .
I don't know what the problem is,because I have all the packages of vue and node installed on the server.
app.js picture is:
i used npm run dev ,npm run production npm run watch They all worked without error but still show nothing
please help me What can I do؟
You didn't call your component in dashboard.blade.php file.
<div id="app">
<login-component></login-component>
</div>
Or if you want to call example component then:
<div id="app">
<login-component></login-component>
</div>
Related
I've recently started a new Jetstream project with Livewire. I've been playing around with setting up my base layout etc and I keep getting a message in the console (which I'm not sure if its mucking up what I'm trying to do with Alpine). In the console it says:
Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire's scripts are loaded before Alpine
Which is confusing me as I am not loading AlpineJS anywhere else. I don't have any CDN references anywhere in my base templates. Alpine is only referenced once where it gets set up which was automatically generated when I first created the jetstream project (under resources/js/app.js).
My understanding is that Livewire already loads Alpine automatically. So why would this error come up?
If you installed alpine as a module and you are having this error, go to your layout file (app.blade.php) or whatever full livewire page that's giving this error or where you imported your livewire scripts and app.js file, then import your livewire scripts before app.js e.g
#livewireScripts
<script src="{{ asset('js/app.js') }}"></script>
instead of the old way:
<script src="{{ asset('js/app.js') }}"></script>
#livewireScripts
I have a pretty simple livewire component that helps a user store a vanity URL
<form wire:submit.prevent="save">
<div class="form-group form-inline">
<span>{{ config('app.url') }}/request/</span>
<input type="text" id="vanity" wire:model.defer="vanityUrl" name="vanityUrl">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">#if($saved) Saved #else Save #endif</button>
<button type="button" id="copy-vanity" class="btn btn-secondary">Copy</button>
</div>
</form>
And the save action is pretty simple as well.
public function save()
{
$user = Auth::user();
$this->validate();
$user->update(['vanity_slug' => Str::slug($this->vanityUrl)]);
$this->vanityUrl = Str::slug($this->vanityUrl);
$this->saved = true;
}
This works locally but not in production. I am using Forge, php7.4, L8, its all the same between the environments except the URLs. I have livewire:scripts and livewire:styles loaded, and again it works locally but not in prod.
In prod, the page reloads. I have been trying to figure this out for a couple days now... driving me crazy. TIA
Cached Views
The most typical issue when Livewire isn't working after deploying to a production environment (or for that matter, after setting it up in localhost as well), is that your views, specifically layouts/app.blade.php is cached before the #livewireScripts directive is loaded. This means that it will not render #livewireScripts or #livewireStyles as the component, but will output the literal string.
This is fixed by simply running php artisan optimize:clear, to clear your cache (specifically the view cahce).
Missing Installation of Livewire
However, there are some cases where Livewire is not installed - or not installed properly. You can ensure that Livewire is installed through composer by running composer show -D while in the root directory of your Laravel application. Look for livewire/livewire. If its not there, then install it (see https://laravel-livewire.com/docs/2.x/installation). To install Livewire through composer, run the following command.
composer require livewire/livewire
Using Alpine.js v3 and Livewire v2w
If you have updated to Apline.js v3, you need to use Livewire v2.5 or higher. Simply update your Livewire version.
Faulty Installation of Livewire
The last scenario I've heard of so far with this kind of problem, is that Livewire is installed - but its still not working properly. This is the most uncommon from what I have seen so far. This happens when the scripts that Livewire hooks into is not working as intended (say, a form with wire:submit.prevent="submit" is submitting the actual form instead of sending the AJAX request), but Livewire is installed and #livewireScrtips is rendering as it should. For whatever reason this happens, I'm not sure (as I haven't experienced it first hand), but its quite simple to fix.
The solution for these scenarios is to reinstall Livewire - and you do that by simply removing and require the package again. After the reinstall, its a good idea to clear the cache, just to ensure that the view is not cached without the Livewire-directives.
composer remove livewire/livewire && composer require livewire/livewire && php artisan optimize:clear
Please Someone please I am in the middle of my final year project but this is not working I am trying for 3 days I am new so I don't know how to ask a question so if you need something please ask me Thanks
This is the view for Shop and i have used Composer require Hardevine/shoppingcart
This is the ShopComponent for Shop
When I ran Laravel 8 on IIS, I had a similar problem. The problem was that the browser couldn't access some of the livewire js files, and the solution was:
Go to D:\Projects\Laravel\laravel8ecommerce\vendor\livewire\livewire\config\livewire.php
and set
'asset_url' => "your_url",
and the problem was disappeared.
I had same problem. To solve this issue what I did was enclose my blade template files with a <div> containing an id="main" like so:
<div id="main">
your blade template code
<div>
Instead Of This
wire:click:prevent=“store({{$product->id}},’{{$product->name}}’,{{$product->regular_price}})”
You need to use this in your blade file
#livewireStyles
your code will be in this area
#livewireScripts
Try This For Calling Store Function
wire:click.prevent="store({{$product->id}},{{$product->name}},{{$product->regular_price}})”
Or
wire:click="store({{$product->id}},{{$product->name}},{{$product->regular_price}})”
My solution was based on #KumTem answer
Inside the livewire blades located at app\resources\views\livewire\sample_blade.php
<div id="main">
... templates here
</div>
I have installed vue.js by following these steps in Laravel 5.6 and all other dependencies are working perfectly. Only Vue.js is not responding.
npm intall
npm run dev
npm run watch
I am sharing all the codes on I have added. I have created a id="app" in my html file.
<div id="app">
<div class="container">
<articles></articles>
</div>
<!-- I used this link in my html file for connecting with app.js file
-->
<script src="{{asset('js/app.js')}}"></script>
I edited the app.js file that is as under.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles', require('./components/Articles.vue')
);
const app = new Vue({
el: '#app'
});
I also created Articles.vue file and linked that to app.js. But my html page is showing nothing.
My file in components/Articles.Vue
<template>
<h1>Hello World!</h1>
</template>
Console is showing no errors
Vue Tab
When I inspect DOM, I get this
This is the Vue file. It is also not showing any tags
As ceejayoz said in the comment: Rename it to e.g. articleElement and use it as <article-element></article-element>
this thread is a bit old, but as i had the same problem as you had (maybe we both watched the same youtube video "Full Stack Vue.js & Laravel"), i will still share my solution. With some research and a lot of trying around i landed on the official Laravel page (https://laravel-mix.com/docs/6.0/what-is-mix).
The last task of this guide "npx mix" did the job for me. Everytime i change some of my js files now i use this little command to compile again and all my changes take place.
Hopefully this will help some others too :)
I am trying implement passport using Laravel 5.4 and I have followed the official documentation step by step. Everything seems to be working fine as per instructions till the point I hit "Frontend Quickstart"
As instructed I published the vendor using
php artisan vendor:publish --tag=passport-components
This gave me the components as expected. After which I registered my components in my app.js
app.js
/**
* Add the CSRF Token to the Laravel object. The Laravel object is being
* used by Axios and the reference can be seen in ./bootstrap.js
*
* Requires the token be set as a meta tag as described in the documentation:
* https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token
*/
window.Laravel = { csrfToken: document.head.querySelector("[name=csrf-token]").content }
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* The Vue components for managing the OAuth setup
*/
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
/**
* Instantiate Vue for use
*/
const app = new Vue({
el: '#app'
});
I installed the dependencies and build the components
npm install
npm run dev
Placed the components in my home.blade.php (test purpose)
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
</div>
</div>
#endsection
But nothing shows up in the view. I tried searching a lot in this topic but all the solutions seems to be pointing towards the gulp config. But Laravel 5.4 doesn't use gulp anymore it uses webmix.
I have been struggling with this for a while now, looking for the communities expert option to help be get through this.
Thanking You.
Make sure you've added <script src="{{ asset('js/vue.min.js')}}"></script> on your layouts.app file.
From official document
In order to use the Passport Vue components, you must be using the Vue
JavaScript framework. These components also use the Bootstrap CSS
framework. However, even if you are not using these tools, the
components serve as a valuable reference for your own frontend
implementation.
Download vuejs here
Hope this help
In your dom, your components must have a parent with an id of "app" since you declared it in your app.js :
const app = new Vue({
el: '#app'
});