Changes are not showing in the website Vue Js? - laravel

<!-- Service Policy Modal -->
<!-- <div class="modal modal-landing fade" id="servicePolicyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body justify-content-center">
<h4 class="modal-title text-center mb-4" id="exampleModalLabel">
{{ trans('lang.service_policy') }}
</h4>
<img :src="publicPath+'/images/service-policy.png'" class="img-fluid mx-auto d-block mb-4" width="50%" alt="">
<div class="text-justify mb-4" v-html="custom_content"/>
<div class="row justify-content-center">
<div class="col-4">
<button type="button" class="btn btn-block btn-landing" data-dismiss="modal">
{{ trans('lang.close_btn') }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
I commented down this code in Vue JS, Laravel application but the problem is the section is still showing on the website. The changes are not reflected on the website.
Can you please help me out with this?

Simply making changes to the Vue files won't actually affect anything on the site, because the actual code that is rendered is in the public folder (most probably the public/app.js file). In order to compile the Vue files to the public folder, you need to run a command after making the changes. npm run dev or npm run prod are used for this. You could also run npm run watch to continuously watch for changes and automatically compile the assets instead of running a command manually each time you make a change.
You should see that each time you make a change and run one of those commands, the change appears also in a file in the public folder of the project. Do not edit the files inside the public folder directly, since if those commands are run /they are likely to be a part of the deploy procedure/, those changes will be overwritten by the newly compiled files from the source ones (those in resources folder).

I could bet that it's related to page chache. Open the Chrome de tools, under Network tab check "disable cache" and try again. Vue js precompiles the js code by chunking vendor files in small js files such as 1.js, 2.js, etc, which are loaded on demand while you navigate your app.
Your new change may be located in 1.js, so no matter the code change, if this file is loaded from cache and not from Network, you won't see the updates until cache refresh.

Related

Logo on Navbar Won't Show in Laravel Jetstream

So I learn Laravel Jetstream using Inertia Stack. While I was doing some changing on Logo in the Navbar on Dashboard view it's still showing.
But when I go to profile view, it's just gone, I don't know why, but if I try using blade function which is asset function, it'll be gone in dashboard view too.
This is my code on ApplicationMark.vue:
<template>
<img class="block h-9 w-auto" src="favicon.png" alt="Logo">
<!-- <img class="block h-9 w-auto" src="{{ asset('favicon.png') }}" alt="Logo"> -->
</template>

Laravel and Vue: How do I get images from my public folder in a Vue component?

I am trying to get a logo image from my public folder in my laravel and Vue application. The file is called index.vue and have the following structure:
<template>
<div>
<div class="header-container">
<div class="header-content">
<div class="logo-container">
<img :src="'/public/images/logo/black.png'" alt="logo">
</div>
</div>
</div>
<!-- Tell Vue where to render components -->
<router-view></router-view>
</div>
</template>
Here is the file structure and you can see that file exists and the path is correct:
But when I switch back to the view it looks like this:
I have also tried to call it the way I would in a blade template using {{ asset() }}, but this doesn't work and gives me a compiler error.
How do I get this image to load in my Vue file?
Not sure about vue + laravel. But, since its a relative path I dont think you need to bind anything.
<img src="/images/logo/black.png" alt="logo">

how to hit an api on button click using laravel

i am new to working with API ,i have 2 buttons in my view file and i want to print the sheet which is available as an API ,
<div class="card">
<div class="card-body">
#include('admin.inc.messages')
<div class="row justify-content-center">
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-block">Back</button>
<button type="button" class="btn btn-primary btn-block">Print Airway Bill</button>
<button type="button" class="btn btn-primary btn-block">Print Invoice</button>
</div>
</div>
</div>
</div>
i have got the path , i want to ask where should i define the path for that , in the web.php or api.php
and second thing how should i give the path in the buttons
any help will be appreciated !
You will need to consume your own api, most likely, or use ajax request. This can be done via passport, seen here in the documentation. If you want you can always bypass, however you will not have the ability to utilize middleware with those requests. Meaning, that your project will be subjected to potential security risk as the request will not be subjected to route middleware. Which protect and assist you in some regards.
For example, if you cannot authenticate against a middleware you will not have the ability to determine which/what user is requesting data. Another comparison one might make would be the ability to login against a user, but then not have the ability through out the application pages to know which user was authenticated. This is comparable to when you log in to stackoverflow you can obviously see you user information/profile in the top right with your picture etc... If you by pass you will not have that ability.
Therefore, I would highly recommend visiting the link posted above and consider consuming your own api or creating a service to do so.

How to Implement Pusher Note for Laravel 5 project.?

Hello Laravel vue.js Developers, please help me, i try to implement Laravel note sharing with others by Pusher but when i try to edit the note i cant retrieve my olders on, juste FYI i want to create a note and share it with another user for correction.
Please i have implement this package from this site: https://pusher.com/tutorials/collaborative-note-app-laravel.
Thank you a lot for your help.
Edit.blade.php
#extends('layouts.admin')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<edit-note :note="{{ $note }}"></edit-note>
</div>
</div>
</div>
#endsection
My problem is when i click to edit the note i can't call the EditNote.vue.

Why is parsing a tpl file in CodeIgniter giving me an error on a web server?

So, my friend that owns the domain that we are working on set up a live development server for me to upload my files to. I had previously been developing on WAMP. I uploaded the CodeIgniter files to the web server(along with the application) and updated the config files. When everything in the config was working, I refreshed the page and got an error.
Parse error: syntax error, unexpected T_STRING in /blah/blah/html/application/frontend/views/overall_header.tpl on line 1
This is the very first TPL file called in the script. I use the CI template parser library to parse TPL files. It worked absolutely fine on WAMP, but now is giving me this error. The TPL file is just pure HTML.
Any ideas?
PS: The web host is Media Temple.
Base Command
<div id="header">
<div id="toolbar">
<ul>
{TOOLBAR}
</ul>
<div id="search">
<form action="#" method="POST">
<input type="text" name="criteria" value="Enter search criteria, then press enter." class="text-input">
</form>
</div>
</div>
<div id="banner">
<div class="logo">
</div>
</div>
<div id="navigation">
<ul>
{MAIN_NAVIGATION}
</ul>
</div>
</div>
May be this is a problem with difference between new line characters on Windows and Linux systems. On local you use WAMP (Windows), so you use \r\n as new line characters. On hosting (I hope, Linux-like hosting?) it not working correctly, because Linux standard new line char is \n . To solve this you need to change all \r\n to \n before putting files on hosting.
For preventing this in future use editor/IDE which can work with linux-like line chars and may be change WAMP environment settings belongs to new line characters.
This is invisible symbols and you use it in any files what contain line breaks. Check this settings in your editor:

Resources