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
Related
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 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()
I am currently make the app.blade.php as
<!DOCTYPE html>
<html>
<head>
<title> abc</title>
<link rel="stylesheet" href='{{URL::asset('/css/style.css ')}}' />
<link rel="stylesheet" href='{{URL::asset('/css/app.css ')}}' />
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div class="wrapper" id="app" v-cloak>
#yield('content')
</div>
<script src="{{ URL::asset('js/app.js') }}"></script>
<script>
var vm = new Vue({
el: '#app',
#yield('vue')
});
</script>
</body>
</html>
And subsequent pages like dashboard.blade.php as
#extends('layouts.app')
#section('title', 'customer :')
#section('content')
<titlebar></titlebar>
<dashboard-page
:data=data
:options=options
#update=updatethedata
><dashboard-page>
#endsection
#section('vue')
data:{
data:{...},
options={...},
},
methods:{
updatethdata:function(){
...;
}
},
#endsection
It works as intended. but i don't know this is how it should be merged or there as some better ways to do it .
It gives me access to both blade and vue to customize my application . but it makes the code much difficult as the js is in blade file which doesnot get minified. more over none syntax highlighter works , as it is not in a script tag.
I am gonna planning to use vue.js in a web application. but it could not loaded and not fired html in browser. Please look at my below code:
<!DOCTYPE html>
<html>
<head>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
The problem is you're trying to create Vue instance before vue.js is loaded, so I think if you put your code after vue.js, your application will work fine.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>