I'm trying to pass value from Laravel to Vue. But the props I get is always undefined (from console.log). I checked it's not the camel case issue. I really can't find where is the issue. Can anyone help, please?
PS. I'm a laravel and Vue beginner. Thank you very much
blade.php file:
#extends('layouts.subject')
#section('content')
<script src="{{ asset('js/subject/subjectapp.js') }}" defer></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<sample message="HELLO"></sample>
</div>
</div>
</div>
</div>
</div>
#endsection
subjectapp.js file:
require('../bootstrap');
window.Vue = require('vue');
import 'babel-polyfill'
import Vuetify from 'vuetify';
import Sample from '../components/subject/Sample.vue';
Vue.use(Vuetify);
const sample = new Vue({
el: 'sample',
vuetify: new Vuetify(),
components: {
Sample
},
render: h => h(Sample),
});
Sample.vue file
<template>
<v-app>
<div class="row">
<div class="col border m-2">
MESSAGE
{{message}}
</div>
</div>
</v-app>
</template>
<script>
export default {
props: ['message'],
created() {
console.log(this.message);
},
}
</script>
Edit:
extra info of my app:
data CANNOT be passed from blade.php to a vue component(A.vue) nested inside.
Data CAN be passed from a Vue component(A.vue) nested in the blade.php, to a vue component(B.vue) nested in that component(A.vue).
You can add this to the end of your blade.php file
<script>
window.prop1 = somePropValue;
window.prop2 = somePropValue;
</script>
and access it on your vue file by calling window.prop1
This solution works for me. Here are my files:
<html>
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<main class="py-sm-4">
<chat-component #if(isset($create_message)) user="{{ $create_message }}" #endif></chat-component>
</main>
</div>
</body>
<script>
window.Laravel = {!! json_encode([
'auth' => auth() -> check() ? auth() -> user() -> id : null,
])!!};
window.LaravelUrl = "{{ url('') }}"
window.user_id = "{{Auth::id()}}"
</script>
</html>
app.js file:
require('./bootstrap');
window.Vue = require('vue');
import WebRTC from 'vue-webrtc'; //video call plugin, not relevant to the answer
Vue.use(WebRTC); //video call plugin, not relevant to the answer
Vue.component('chat-component', require('./components/ChatComponent.vue'));
const app = new Vue({
el: '#app',
});
Vue example usages:
axios.post(window.LaravelUrl + `/send/${this.friend.session.id}`)
//
axios.post(window.LaravelUrl + "/send_calling_info", {
session_id: this.friend.session.id,
receiver_id: this.friend.id,
caller_id: window.user_id
})
//
return this.session.blocked_by == window.Laravel.auth;
and some other usages inside axios.post()
Related
I want to load vue component in laravel blade file, but my changes are not reflected in laravel blade file. my vue file content is not loaded into blade file, example component return empty. There is no error in console, please help me to solve my problem.
**Blade file**
<!DOCTYPE html>
<html>
<head>
<script defer src="{{ mix('js/example.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
</html>
**
**example.js**
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue').default);
const app = new Vue({
el: '#app'
});
**
<!-- begin snippet: js hide: false console: true babel: false -->
Example.vue
<template>
<div class="container">
<h1>Example Code</h1>
</div>
</template>
<script>
export default {
}
</script>
Just change your js code like below way
require('./bootstrap');
import Vue from 'vue'
import Example from "./components/Example"
const app = new Vue({
el: '#app',
components: { Example },
});
Then you have to build the assets. Run below command
npm run dev
i've got this error in my console
Uncaught SyntaxError: The requested module './components/tileHeader/controller.js' does not provide an export named 'tileHeader'
this is my code
components/tileHeader/controller.js:
Vue.component('tileHeader',{
template: '#tileHeader',
data(){
return{
count:0
}
},
})
components/tileHeader/view.html:
<script type="text/x-template" id="tileHeader">
<div class="container">
<div class="row">
<div class="col">
<!--<div v-show="item.label != null || item.label == undefined"
class="label">{{item.label}}</div>
<img v-show="item.image != null" src="item.image"/>-->
<p>This is a Test</p>
</div>
</div>
</div>
</script>
main.js:
import Vue from './vue.js';
import { tileHeader } from './components/tileHeader/controller.js';
new Vue({
el: '#app',
components: {
'tileHeader': tileHeader
},
})
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Vue X-Templates</title>
</head>
<body>
<div id="#app"></div>
<script type="module" src="main.js"></script>
</body>
</html>
i'm working with x-templates.
this is my project structure:
structure
Could you try something like this ?
Create a single file that will contain your html / css and js.
tileHeader.vue :
<template>
<!-- Your view.html -->
</template>
<script>
export default {
name: 'tileHeader',
}
</script>
<style scoped>
</style>
Since the file has a export default, you'll be able to import it in another file
Add to main.js :
import tileHeader from "./components/tileHeader.vue";
I am trying to make a component using Vue for my javascript code but it does not work.
My main goal is to create a component with vue or Vue3
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head
<body>
<div id="app">
<myelement name="ibrahim" age="12"></myelement>
</div>
</body>
<script>
Vue.component("myelement",{
props:["name","age"], // for arguments
template:`
<h1> welcome to my vue component,<br> name :{{name }} and age : {{age}}</h1>
`// template where my code template should be
})
var vm = new Vue({ // creating an object from Vue
el:"#app" // bind my created code to the id "app"
})
</script>
This code is working, but when I put a Javascript code in instead of html code. I got an error
this code I am using for my Javascript code, but the vue is not calling my javascript code . It is just calling my html code
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head
<body>
<h3>this page works</h3>
<div id="app">
<myelement ></myelement >
</div>
</body>
<script>
document.write("<h1>Header from document.write()</h1>");
var temp = "<h1>Hello from vue veriable</h1>"
Vue.component("myelement ",{
template:`
<script>
alert(1);
document.write("<h1>Header from document.write()</h1>");
</script>
`// template where my code template should be
})
var vm = new Vue({ // creating an object from Vue
el:"#app" // bind my created code to the id "app"
})
</script>
what I want to do is, when I create the tag in the page then the alert(1) will show up.
In vue, you cannot use script tag in template of components and you get below error:
[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Instead you can put your javascript codes in created lifecycle hook. This hook is called when your component create:
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<body>
<h3>this page works</h3>
<div id="app">
<myelement></myelement>
</div>
</body>
<script>
Vue.component("myelement", {
template: `<h2>Hello</h2>`,
});
var vm = new Vue({
el: "#app",
created() {
alert(1);
document.write("<h1>Header from document.write()</h1>");
},
});
</script>
I'm not sure but I think this code will work correctly:
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<body>
<h3>this page works</h3>
<div id="app">
<myelement :message="variableAtParent"></myelement>
</div>
</body>
<script>
Vue.component("myelement", {
props: ['message'],
template: '<p>At child-comp, using props in the template: {{ message }}</p>',,
});
var vm = new Vue({
el: "#app",
data: {
variableAtParent: 'DATA FROM PARENT!'
}
});
</script>
I'm working whit laravel and I have installed component vue. https://github.com/dalphyx/vue-top-progress
I will like to use this component into different pages and other components.
I don't know how to set global, for use other components or pages blade. laravel.
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('crud1', require('./components/crud1.vue').default);
Vue.component('crud2', require('./components/crud2.vue').default);
import { vueTopprogress } from 'vue-top-progress';
const app = new Vue({
el: '#app',
mounted(){
this.$refs.topProgress.start()
setTimeout(() => {
this.$refs.topProgress.done()
}, 2000)
},
components: {
vueTopprogress
}
});
home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
</head>
<body>
<div class="wrapper" id="app">
<vue-topprogress ref="topProgress"></vue-topprogress>
<crud1></crud1>
</div>
<script src="app.js"></script>
</body>
</html>
crud1.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">crud 1 Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.$refs.topProgress.start()
setTimeout(() => {
this.$refs.topProgress.done()
}, 2000)
}
}
if I use "this.$refs.topProgress.start()" on crud1 I get this error
app.js:41686 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'start' of undefined"
found in
---> <crud1> at resources/js/components/crud1.vue
<Root>
I am trying to understand how vue works. To do that I simplify it as much as possible, hence no webpack no CDNs or any other packages (unless its a necessity).
So, Came up with this but trying to inject a simple a variable into html gives vue is undefined error.
*vue.js file is taken from npm vue package.
<html>
<head>
<script src="vue.js"></script>
<script>
new vue({
data: 'This must be injected'
}).$mount('#app');
</script>
</head>
<body>
<div id="app">
<p> {{ data }} </p>
</div>
<h1>This is a sample header</h1>
</body>
</html>
You need to have Vue load after the Dom is ready so it can find the element to attach itself to — don't put it in the head. Also it's upper-case Vue. And Data can't just be a naked property it should be a function that returns an object with your properties (it can also be an an object, but it's not recommended once the app starts getting bigger).
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p> {{ data }} </p>
</div>
<h1>This is a sample header</h1>
<script>
Vue.config.productionTip = false
new Vue({
data(){ return {
data: 'This must be injected'
}
}
}).$mount('#app');
</script>
There are a few problems in your code.
vue should be Vue
data should be an Object or Function - https://v2.vuejs.org/v2/api/#data
<html>
<head>
</head>
<body>
<div id="app">
<p> {{ myText }} </p>
</div>
<h1>This is a sample header</h1>
<script src="vue.js"></script>
<script>
new Vue({
data: {
myText: 'This must be injected'
}
}).$mount('#app');
</script>
</body>
</html>
I think the data must have an object as it's value.
<html>
<head>
<script src="vue.js"></script>
<script>
new Vue({
data: {
txt: 'This must be injected'
}
}).$mount('#app');
</script>
</head>
<body>
<div id="app">
<p> {{ txt }} </p>
</div>
<h1>This is a sample header</h1>
</body>
</html>