I'm having a difficult time getting Vue to work in a blade.php page I have in my laravel website.
Here is the blade page code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<!-- Custom css -->
<link href="{{ url('sass/custom.scss.css') }}" type="text/css" rel="stylesheet">
<!-- Fav icon -->
<link rel="icon" type="image/png" href="{{ url('omnisection.png') }}">
<!-- development version, includes helpful console warnings -->
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>
<script src="{{ mix('/js/RecordRTC.js') }}"></script>
<script src="{{ mix('/js/customrecrtc.js') }}"></script>
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}#media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}#media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}#media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}#media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
</style>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app">
#{{ message }}
</div>
<script>
var test = new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img class="rounded-3" src="{{ url('omnisection(new).png') }}" style="width:172px;height:108px" /></a>
<button class="navbar-toggler brotoggle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
#foreach($pages as $page)
<li class="nav-item">
<a href="{{ url($page['url']) }}">
<button class="btn btn-lg btn-outline-secondary brobutton" type="button">{{ $page['page_name'] }}</button>
</a>
</li>
#endforeach
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search Requests" aria-label="Search">
<a href="{{ url('search') }}">
<button class="btn btn-outline-secondary brobutton" type="submit">Search</button>
</a>
</form>
</div>
</div>
</nav>
<div class="relative flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
#if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
#auth
Dashboard
#else
Log in
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
</div>
<!-- Fluid container -->
<div class="container-fluid mt-1">
<div class="row">
<div class="col fs-1 text-center">
Your Data
</div>
<div class="col fs-1 text-center border-start">
Other's Data
</div>
</div>
<div class="row">
<div class="col">
#guest
<a href="{{ url('login') }}">
<button type="button" class="btn rounded btn-primary btn-lg start-50 translate-middle-x position-relative" alt="login button">Log in</button>
</a>
#endguest
</div>
<div class="col fs-1 border-start text-center">
#guest
?
#endguest
</div>
</div>
<div class="row">
<div class="col">
#auth
<div class="input-group mb-3">
<input type="file" class="form-control mt-2" id="inputGroupFile02" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this to upload a file">
<label class="input-group-text mt-2" for="inputGroupFile02">Upload</label>
</div>
#endauth
</div>
<div class="col border-end" id="rcrdplayer">
#auth
<button v-on:click="startrecord" type="button" class="rounded-circle button-rec btn-lg btn-secondary" id="btn-start-recording" alt="record audio button" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record audio">Rec</button>
<img src="video.svg" class="img-fluid custom-img-bg rounded" id="btn-start-recording" alt="record video button" height="75" width="75" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record video"/>
#endauth
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<!-- Recorder -->
#auth
<div class="row">
<div class="col">
<select class="form-select form-select-sm media-resolutions">
<option value="default">Default resolutions</option>
<option value="1920x1080">1080p</option>
<option value="1280x720">720p</option>
<option value="640x480">480p</option>
<option value="3840x2160">4K Ultra HD (3840x2160)</option>
</select>
<select class="form-select form-select-sm media-framerates" aria-label=".form-select-sm example">
<option value="default">Default framerates</option>
<option value="5">5 fps</option>
<option value="15">15 fps</option>
<option value="24">24 fps</option>
<option value="30">30 fps</option>
<option value="60">60 fps</option>
</select>
<select class="form-select form-select-sm media-bitrates" aria-label=".form-select-sm example">
<option value="default">Default bitrates</option>
<option value="8000000000">1 GB bps</option>
<option value="800000000">100 MB bps</option>
<option value="8000000">1 MB bps</option>
<option value="800000">100 KB bps</option>
<option value="8000">1 KB bps</option>
<option value="800">100 Bytes bps</option>
</select>
</div>
<div class="col border-end">
</div>
</div>
#endauth
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Here is the Webpack code:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
module.exports = {
mode: 'development'
}
mix.sass('resources/css/custom.scss','public/sass/custom.scss');
mix.js('node_modules/recordrtc/RecordRTC.js', 'public/js/RecordRTC.js');
mix.js('resources/js/customrecrtc.js', 'public/js/customrecrtc.js');
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
I've read and re-read the docs on the installation, then I found that I was in version 2.x, so I switched to version 3.x. All this to no avail. It works if I use the CDN method, and I am then able to run some vue code in the blade template. I really just wanted to have all my node modules linked to the page through NPM, otherwise I would just use the CDN method.
Update: I have added the Webpack and Blade code. Since I installed Vue 3 using
npm install vue#next
I can't find where to add Vue from my node modules. This is a new laravel project, using Laravel 8.x
https://laravel.com/docs/8.x/mix#working-with-scripts
As it says in the above link, since I'm using Webpack which compiles JS code. I found that I must import the specific node module. If you have programmed before, think of it as importing or including a file in Java, C++, Python, or what have you.
In my case I needed to realize that I not only had to import one module, but many. And then specifically use the same file I imported into to type the relevant code. I still can't type the JS into the .blade.php file, but this should work well enough.
This an example of my custom.js
import node_module1
import node module2
// code goes here
I followed this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial, and I managed to include Jcrop in my laravel project, everything is working fine. I click on choose image, I crop the image, and the image is shown in the jcrop image box. but when I submit the form. I get the error in my validation that says, image is required ( i wrote a validation for my image file). why am I getting this error ??? the image is showing in that box. what am I doing wrong ? or is there a problem with JCrop ?!! please help me.
This is the image when I upload :
https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
This is the image when I submit and I get the error : https://drive.google.com/open?id=1gSCurwZ50TF_nMZZcWnJ4keBsJmcQKEh
Template Code:
<form method="post" action="{{route('userRegister')}}" enctype="multipart/form-data">
#csrf
<div class="col-md-6 alert alert-danger {{!empty($errors->all()) ? 'show' : 'hide'}}">
<ul style="text-align: right;" dir="rtl">
#foreach($errors->all() as $error)
<li>{{$error}}</li>
#endforeach
</ul>
</div>
<div class="row col-md-12" dir="rtl">
<div class="input-group col-md-4">
<div class="container" dir="ltr">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="filedata" id="filedata" >
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success"><div class="js-progress bar"></div></div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body"><div class="js-img"></div></div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
</div>
</div>
Validation Code:
public function rules()
{
return [
'filedata' => 'required|max:1024',
];
}
public function messages()
{
return [
'filedata.max' => 'سایز تصویر نمیتواند بیش از 2 مگابایت باشد',
'filedata.required' => 'وارد کردن تصویر الزامی است',
];
}
I get this error in my console :
POST http://localhost:8000/server/ctrl.php?fileapi155834626282411 404 (Not Found) FileAPI.min.js:2
After talking to you in the comments, it would appear your getting 404 errors on the FileAPI javascript files.
You were using the following configuration for your FileAPI:
var FileAPI = { debug:true, media:true, staticPath:'{{asset('crop-userpic\FileAPI')}}' };
This was setting your staticPath to the /resources/assets/crop-userpic/FileAPI directory, which placed them outside of the webroot of your website.
You need to set the staticPath to the location of the FileAPI javascript files within your public directory so they can be accessed by jcrop.
Example Usage
<!-- include jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Set FileAPI settings -->
<script>
window.FileAPI = {
debug: false,
media: true,
staticPath: '/js/jquery.fileapi/FileAPI/'
};
</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.exif.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jcrop/jquery.Jcrop.min.js"></script>
In the above example staticPath is the path to the files FileAPI.min.js and FileAPI.exif.js.
You should make sure you have those files accessible from within the /public/js/jquery.fileapi/FileAPI/.
I have watched this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial for using jcrop, but it is for Php, when I'm using it with Laravel, the program stops at Validation, says image filed is required, like I haven't chosen an image, but I do have ! , and I'm seeing the image in the box . Note: when I push the upload button in crop modal, I get this error :
POST http://localhost:8000/server/ctrl.php?fileapi155837244028211 404 (Not Found) , it seems i need to set a post rout , but how ? i don't know . does anyone know how we should work with jcrop in laravel ?
here is my code :
<link href="{{asset('crop-userpic\style.css')}}" rel="stylesheet"/>
<link href="{{asset('crop-userpic\jcrop\jquery.jcrop.min.css')}}" rel="stylesheet"/>
<form method="post" action="{{route('testing')}}" enctype="multipart/form-data">
#csrf
<div class="container">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="image" id="image">
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success">
<div class="js-progress bar"></div>
</div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body">
<div class="js-img"></div>
</div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
<input type="submit" name="submit" value="sumbit" />
</form>
<script src="{{asset('crop-userpic\jquery.min.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.easing.min.js')}}"></script>
<script>
var FileAPI = {
debug: true,
media: true,
staticPath: '{{asset('crop-userpic\FileAPI')}}'
};
</script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.min.js')}}"></script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.exif.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.Fileapi.js')}}"></script>
<script src="{{asset('crop-userpic\jcrop\jquery.Jcrop.min.js')}}"></script>
<script src="{{asset('crop-userpic\statics\jquery.modal.js')}}"></script>
<script src="{{asset('crop-userpic\script.js')}}"></script>
and this is the image : https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
as you can see the image is in the box , but when i push submit , i get the validation error image field is required , like i don't have an image at all
please help me . i don't know what to do . and i love this Jcrop .
I have devloped a Google Spreadsheet Add On. I am trying to add Inline Installation option on my website. But my addon is being added as a Google Chrome Extension rather a normal add on installation.
Expected outcome: Installation of Add-On on user's account.
Here is gist of code:
<html>
<head>
<title>Inline Installtion</title>
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jjkkhnadaddgofdoapkbdemklgkcnmld">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="section">
<div class="row">
<div class="col-sm-2">
<div class="">
<h5 class=""></h5>
</div>
</div><!-- left div/column -->
<div class="col-sm-8 form_div">
<br>
<br>
<br>
<br>
<div class="form-group main_button">
<div class="col-lg-10 col-lg-offset-2">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary" id="install-button">Add to Chrome</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="">
<h5 class="center"></h5>
</div>
</div><!-- right div/column -->
</div><!-- row -->
</div><!-- section -->
</div><!-- container -->
<script>
$(document).ready(function() {
function successCallback(e)
{
console.log("Success");
console.log(e);
}
function failureCallback(e)
{
console.log("Failure");
console.log(e);
}
$("#install-button").click(function(event) {
chrome.webstore.install("https://chrome.google.com/webstore/detail/jjkkhnadaddgofdoapkbdemklgkcnmld", successCallback, failureCallback);
});
});
</script>
</body>
</html>
So my question is: Is it possible to do it? If yes, how do I enable inline installation for Google Spreadsheet AddOn?
Help is much appreciated. Thank You.
No, Google doesn't allow this to embed add-on in your website.
there is another way to show your Google Apps Add-on in your website.
Just show the Marketplace Links or Snapshots on the website like Survey Monkey did.
LINK
OR
Scrap the data from marketplace in the HTML format and show it on the website.
Follow the Publishing an Add-on which details the necessary steps to publish this as Add-on. Add-ons are cannot be found in Chrome Webstore as the webstore is for Apps and Extensions. Add-ons are harbored in Google Marketplace.
If you want to use it, just go to Google Marketplace and type the name of the Add-on you created. You will be asked to install it, allow permission and finally be able to use it. You can check if it's successfuly installed by checking the Add-ons menu button in the spreadsheet.
I am getting message "Could not find the file list container in the template" appearing in my Javascript debug console when using fine uploader.
Here is a jsfiddle example of the problem occurring.
http://jsfiddle.net/Lu82ba9L/1/
The code from the example is repeated here
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area">
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-list-selector" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</div>
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
Just for additional information that may be helpful, I have a working version here. http://jsfiddle.net/61motjed/2/ .In this version here I have moved the "div.qq-upload-list-selector" element to a different position in the DOM (however, this is not the DOM structure I want). It is also unclear to me why the first example fails but the 2nd example is working.
Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.