I am trying to use buefy to my project and I can't use the vue.js on laravel 5.8 please help.
I have this on my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
here is my blade template
#section('content')
#foreach ($permissions as $permission)
<div class="field">
<b-checkbox v-model="permissionSelected" native-value="{{$permission->id}}">
{{$permission->display_name}} <em>{{$permission->description}}</em>
</b-checkbox>
</div>
#endforeach
#endsection
#section('scripts')
<script>
var app = new Vue({
el: '#app',
permissionSelected: ['create-users']
});
</script>
#endsection
the checkbox of the buefy is not working.
With laravel it's better to use vue files and compile with NPM.
Here's the blade file. Laravel-mix will import the compile /public/js/app.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
...
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Your resources/js/app.js will use App.vue component:
The App.vue could be :
<template>
<div>
<h1>Hello</h1>
<template v-for='permission in permissions' :key='item.id'>
<div class="field">
<b-checkbox v-model="permissionSelected" native-value="{{permission->id}}">
{{permission->display_name}} <em>{{permission->description}}</em>
</b-checkbox>
</div>
</template>
</div>
</template>
<script>
export default {
name:'app',
data:()=>({
permissions:[],
permissionSelected:null,
....
in a terminal use this command to compile your app.js, App.vue : npm run dev
Related
I'm trying to get this header component to be recognised and it just isnt. I've tried messing setting eslint to strict, and messing with my syntax to no avail. I don't get it, this should be so simple. ANy help would be appreciated.
App.vue
<template>
<div class="container">
<header />
</div>
</template>
<script>
import header from './components/header'
export default {
name: 'App',
components: {
header,
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
</html>
header.vue
<template>
<header>
<h1>Component header</h1>
</header>
</template>
<script>
export default {
name: 'header',
};
</script>
<style>
header {
display: flex;
}
</style>
Any help would be awesome. Thankyou.
The main.jsneeds to be imported into the index.html:
<body>
<div id="app"></div>
<script type="module" src="/src/js/main.js"></script>
</body>
(using the correct path)
It is better to rename your header component to another word, because <header> is used as a standard tag name in html
I have a minimal Vue app:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta http-equiv='x-ua-compatible' content='ie=edge'>
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<!--3. Create the Vue instance-->
<script>
window.onload = function(){
new Vue({
el: '#app',
data: {
},
template: ''
})
}
</script>
</head>
<body>
<div id='app'>
</div>
</body>
</html>
and I want to show the date picker from https://vcalendar.io/examples/datepickers.html#button-dropdown but is only specified as template.
What are the steps to display that date picker inside my application?
new Vue({
el: '#app',
data: () => ({
selectedDate: null
}),
template: `
<div>
<v-date-picker class="inline-block" v-model="selectedDate">
<template v-slot="{ inputValue, togglePopover }">
<div class="flex items-center">
<button #click="togglePopover()">
Pick date
</button>
<input
:value="inputValue"
readonly
/>
</div>
</template>
</v-date-picker>
</div>
`
})
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<div id='app'>
</div>
I am trying to render reactJS a component on my laravel (5.7) but it does not seem to show up. This is what my files look like:
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>React JS</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{asset('css/app.css')}}" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));
App.js
import React from 'react';
class App extends React.Component() {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
export default App;
npm run watch is running and shows no errors.
Please what might I be doing wrong here?
Using defer fixed it for me
<script defer src="js/app.js"></script>
Use defer : The defer attribute is a boolean attribute.
<script defer type="text/javascript" src="{{ asset('js/app.js') }}"></script>
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Source: MDN
Syntex
You have syntactic bug when you declare class in App.js. You don't use parentheses when you declare class in JavaScript.
class App extends React.Component {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Add this inside the <head> </head>
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
One way to solve this issue is by extracting the vendor library code in a separate file. To do so, open the webpack.mix.js file and update its code as follows:
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.extract(['react'])
.postCss('resources/css/app.css', 'public/css', [
//
]);
I am trying to get the HTML input to be reflected in the Vue dev tool panel and in the console but none of them are working.
my blade file contains this code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<title>Chat Room</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<ul class="list-group offset-4 col-4">
<li class="list-group-item active">Chat Room</li>
<input type="text" class="form-control" placeholder="Type your
message here" v-model="text" #keyup='send'></input>
</ul>
</div>
</div>
{{-- <script src="{{ asset('js/app.js') }}"></script> --}}
</body>
</html>
The app.js is like this.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('message', require('./components/message.vue'));
const app = new Vue({
el: '#app',
data: {
text:''
},
method:{
send(){
console.log(this.message);
}
}
});
The thing is i am not getting any error but the binding is also not working. I am looking for the input text in the html to be displayed in the console and vue panel data array.
Layout.app already contains html head and body tags isn't it?
At this time you are putting a whole new page inside the page
So it won't work cause the first div#app is in the app.blade.php
EDIT : plus your script is commented with blade line comment markup
Trying to use only Single File Components with Laravel. The components are mounted but events do not fire. Inside ExampleComponent I have a button #click="test" that does not fire.
It worked previously when I directly used the ExampleComponent within the blade template but after incorporating an App.vue component the events stopped.
Blade Template
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('/js/app.js') }}""></script>
<script src="/js/app.js"></script>
</body>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import App from './components/App.vue'
Vue.use(Buefy)
Vue.component('navbar', require('./components/Navbar.vue'));
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
App.vue
<template>
<div id="app">
<ExampleComponent/>
</div>
</template>
<script>
import ExampleComponent from './ExampleComponent.vue'
export default {
components: {
ExampleComponent
}
}
</script>
ExampleComponent.vue
<template>
<div style="background-color: #f7faff">
<navbar></navbar>
<button #click="test">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
test() {
console.log("TEST")
}
},
mounted() {
console.log("Component mounted.");
}
};
</script>
Your Blade Template seems to have conflicting Javascript files that are loaded.
<script src="{{ mix('/js/app.js') }}""></script>
Should be the only script you are loading. That way, Laravel Mix can always compile the latest changes to your app.js file. See if that helps, because your .vue and .js files look wired up correctly.
I experienced a similar problem, only to find that I had made an unnecessary import in the app.js