guess it's a stupid question but I don't know a solution. I want to load a vue component and js file to a blade view.
When i put
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>
it loads the selectize_settings.js file but not the vue. When i put defer
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>
it loads the vue component but not the selectize_settings.js (ReferenceError: $ is not defined). I know that's because jquery hasn't been loaded through app.js when I load selectize_settings.js.
app.js
/**
* 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');
window.Vue = require('vue');
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'selectize/dist/css/selectize.default.css'
window.$ = window.jQuery = require('jquery')
require('selectize');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
test.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>
<script src="https://kit.fontawesome.com/4262f4e15a.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="control-group">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<div class="vue-comp">
<example-component></example-component>
</div>
</div>
</body>
</html>
selectize_settings.js
$( document ).ready(function() {
$('#select-beast').selectize({
create: true,
sortField: {
field: 'text',
direction: 'asc'
},
dropdownParent: 'body'
});
});
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
I hope somebody can help. Greetings!
Try this in your app.js
//...
global.$ = global.jQuery = require('jquery');
//...
You may also remove defer attr
<script src="{{ asset('js/app.js') }}"></script>
Try this :
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
ok it works when you put defer to the js file as well!
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}" defer></script>
Related
VScode is not importing my main.js file. I don't understand what I am doing wrong either. The index.html is right next to the main.js but it is not able to find it. I have imported many js files into html before so why is it breaking on me now? Does anyone have any idea's?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<!--Mount App-->
<script>
const mountedApp = app.mount;
</script>
</body>
</html>
Here is the js file, I am not able to use it because it's not connecting to the html so there is it is just spiting out how Vue is not defined.
const app = Vue.createApp({
data() {
return{
product: 'Socks'
}
}
})
And the directory looks like this
Intro-to-Vue
-Assest
-Images
Socks.png
Index.html
main.js
Any help would be awesome. Thanks
You're using the vue 3 syntax with vue 2 CDN script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
</body>
</html>
and main.js like :
new Vue({
el: '#app',
data() {
return {
product: 'Socks'
}
}
})
I'm locked into a jQuery ui issue. I have done a form that I need to autocomplete all the field based on client id. It is like if I'm typing the id of an existing client, all the fields should be autofill with all that's client values from database table like fisrtname , last name, address, date-of-birth, but for the first i'm just trying to test if jquery Ui is working and I got the "$(...).autocomplete is not a function" error in console. It is not from Jquery because I have done also a notification system and i dysplay all notification with Jquery and it is working , I think That it's from jQuery UI. I have tried all possible solutions that I found with no success. Thank's in advance ! Good day to everybody! :)
This is My layouts.app
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="userId" content="{{Auth::check() ? Auth::user()->id : '' }}">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{asset('jqueryui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]); !!}
</script>
<!-- Fonts -->
{{-- <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --}}
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{asset('jqueryui/jquery-ui.min.css')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}">
<title>S.C. Amanet Stefany IFN S.R.L.</title>
<!-- Bootstrap Core CSS -->
<link href="{{asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
<!-- morris CSS -->
<link href="{{asset('assets/plugins/morrisjs/morris.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{asset('css/colors/blue.css')}}" id="theme" rel="stylesheet">
{{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
</head>
<body>
.... this is my content ....
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}"></script>
{{-- <script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script> --}}
{{-- <script src="{{asset('js/jquery.js')}}"></script> --}}
<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/plugins/bootstrap/js/popper.min.js')}}"></script>
<script src="{{asset('assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('js/jquery.slimscroll.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('js/sidebarmenu.js')}}"></script>
<!--stickey kit -->
<script src="{{asset('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js')}}"></script>
<!--Custom JavaScript -->
{{-- <script src="{{asset('js/custom.js')}}"></script> --}}
<script src="{{asset('js/custom.min.js')}}"></script>
{{-- <script src="{{asset('js/jquery-ui.js')}}"></script> --}}
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="{{asset('assets/plugins/sparkline/jquery.sparkline.min.js')}}"></script>
<!--morris JavaScript -->
<script src="{{asset('assets/plugins/raphael/raphael-min.js')}}"></script>
<script src="{{asset('assets/plugins/morrisjs/morris.min.js')}}"></script>
<!-- Chart JS -->
<script src="{{asset('js/dashboard1.js')}}"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{asset('assets/plugins/styleswitcher/jQuery.style.switcher.js')}}"></script>
</body>
</html>
This is my view with that form
<div class="form-group row ml-1 mb-1">
<label for="example-text-input" class="col-3 col-form-label pt-0" style="min-width: 80px;">Serie B.I./C.I.:</label>
<div class="col-3 pl-0">
<input class="form-control input-height pl-1 pr-1" name="serie" type="text" value="" id="">
</div>
<div class="col-4 pl-0">
<input class="form-control input-height pl-1 pr-1" name="nr_id" type="text" value="" id="cltId" > //this #cltId ----------
</div>
</div>
And this is my resource/js/app.js with the jQuery code that I need
$(document).ready(function(){
$("#cltId").autocomplete({
source: [
'Apple',
'Banana',
'Orange',
]
});
});
Any suggestion ? Have I added something that I shouldn't ? Have I write the code in wrong way ? I can not find the mistake ,any answer will help me lot.
Finally solved, I have moved all the jQuery code in app.js, I have run the command
npm install jquery-ui --save-dev
and I imported it in app.js like :
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
IMPORTANT ! note that the autocomplete.js from the ends is work for me because is the widget that I want to use , find out what widget you want and import it there after importing jquery :
Import 'jquery-ui/widgets/here is the widget that you want .js'
But before look to not import jquery anywhere else like layouts or any other js files like bootstrap.js for example.
I am integrating a platform with a browser based language switcher. I am planning to use Vuei18n for the language switcher because I am using Vue. But the thing is, there is an error showing unexpected identifier on both line 1 in my language.js and home.js. My scripts are in the same folder.
Here is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sapphire | Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"> <!-- BOOTSTRAP FRAMEWORKS -->
<link rel="stylesheet" type="text/css" href="css/spinners.css"/> <!-- PRELOADER -->
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css"> <!-- FONTS -->
<link rel="stylesheet" type="text/css" href="css/style.css"/> <!-- CUSTOM STYLES -->
<link rel="shortcut icon" href="assets/images/static/favicon.ico"> <!-- WEB ICON -->
</head>
<body>
<!-- START OF VUE APP -->
<div id="app">
<!-- ================================ -->
<!-- HEADER/NAVBAR -->
<!-- ================================ -->
<ife-header disable-sidebar-toggle=true :change-language='changeLanguage'></ife-header>
<!-- ================================ -->
<!-- PAGE CONTENT -->
<!-- ================================ -->
<div class="row text-center ife-home">
<div class="p-1 col-6 col-md-4 col-lg-3" id="box1" >
<img src="assets/images/static/music.jpg" width="200px" alt="">
<div id="box2"><a class="clean-link" href="music.html"><i class="fas fa-4x fa-music box-icon"></i><p class="box-label text-white">{{ $t('hello') }}</p></a></div>
</div>
</div>
</div>
<!-- END OF VUE APP -->
<!-- ================================ -->
<!-- Scripts -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery-confirm.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/lazy/jquery.lazy.min.js"></script>
<script src="vendor/vue/vue.min.js"></script>
<script src="js/components.js"></script>
<script src="vendor/vue/vue-i18n.js"></script>
<script src="js/language.js"></script>
<script src="js/home.js"></script>
</body>
</html>
Here is my Vuejs code or home.js
import Vue from "vue"
import { i18n } from './language.js'
var app = new Vue({
el:'#app',
router,
i18n,
render: (h) => h(App)
})
Here is my Vuei18n code or language.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'en', //set locale
fallbackLocale: 'en',
messages: { en: { hello: 'Hello'}, bg: { hello: '3apeben' } } //set locale message
})
"I expect the output Hello but it displays {{ $t('hello') }}"
I've made a project in React and HTML5. Previously, to call my render function I had put my render into a global function like this:
window.shareRenderResetResult = function () {
ReactDOM.render(
<div> hello </div>,
document.getElementById('salut')
);
};
and I called it in my html page like this:
<script>
shareRenderResetResult();
</script>
Today, for an another project, I have do the same things but I now get a warning in my console:
Uncaught ReferenceError: shareRenderResetResult is not defined
at (index):207 (anonymous) # (index):207
I don't know what to do. Ideas?
my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>h</title>
<link rel="shortcut icon" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script type="text/babel" src="{{ url_for('static', filename='JS/test.js') }}"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.css') }}">
<script src="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.js') }}"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://use.fontawesome.com/0b3dc57bca.js"></script>
<link rel="shortcut icon" href="">
</head>
<body>
<div class="row">
<div id="salut">
</div>
</div>
<script>
console.log("what's wrong with you ?");
shareRenderResetResult();
</script>
</body>
</html>
i have put a console.log in my function but nothing appeared.
When I try to run the following code in Laravel with vue.js:
<html>
<head>
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list="{{ json_encode($locations) }}"></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">#{{ item.name }}</li>
</ul>
</template>
<script>
new Vue({
el: 'body'
})
Vue.component('data', {
template: '#ln-data',
props:['list']
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.common.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<style>
.newclient {
display:none;
}
</style>
</body>
</html>
I receive the following errors in the console:
Uncaught ReferenceError: process is not defined(anonymous function) #
vue.common.js:981 vue.common.js:9157 Uncaught TypeError: this._init is
not a function
What am I doing wrong?
Try this:
Changes to your version:
vue.js imported instead of vue.common.js
moved your own <script>...</script to the bottom of the imports because it depends on the vue.js import
activate the vue debug mode while developping makes it easier to find errors.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list="{{ json_encode($locations) }}"></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">#{{ item.name }}</li>
</ul>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<script>
// vuejs debug mode
Vue.config.debug = true; //TODO: Remove in production
new Vue({
el: 'body'
})
Vue.component('data', {
template: '#ln-data',
props:['list']
})
</script>
<style>
.newclient {
display:none;
}
</style>
</body>
</html>