how Can I render smarty inside vue? I wanted to create vue instance on everything in my app and connect it with smarty. I want to use vue for frontend data and smarty for backend data. When I generate code like in example it appears and when vue render disappear
<div id="vue-app">
<div>{$smartyVariable}</div>
<div>
Maybe to late but... You can use the {LITERAL} in your *.tpl
Something like this:
<div>
<div id="app">
<h1>{literal} {{ message }} {/literal}</h1>
</div>
{literal}
<script>
var myObject = new Vue(
{
el: '#app',
data: {
message: 'Hello Vue!'
}
}
);
</script>
{/literal}
</div>
Related
I have created a blade layout that uses #yeild and has a script to get some json data, this looks like this:
...
<div class="col-lg-6" id="comments">
<h3>Comments</h3>
#yield("comment_list")
</div>
...
<script>
const Comments = {
data() {
return {
comments: []
}
},
mounted() {
axios.get("{{route('api.comments.index')}}")
.then(response=> {
this.comments = response.data;
})
.catch(response => {
console.log(response);
})
}
}
Vue.createApp(Comments).mount('#comments');
</script>
Then I add to the "comment_list" in a different file.
I know I can loop through the response like this:
<li v-for="comment in comments">
#{{ comment.title }}
</li>
However I need this in a custom blade component, an example of what I want to achieve is this:
#foreach($comment in comments)
<x-comment-view :title="$comment->title" :content="$comment->content" :author="$comment->user->name"/>
#endforeach
Any help would be appreciated, I'm not sure what to do here.
I use Livewire, how can I put a loder on all pages but call it once
nav.blade.php
<html>
<head>
#livewireStyles
</head>
<body>
<livewire:layouts.header/>
{{ $slot }}
#livewireScripts
</body>
</html>
header.blade.php
<div>
<div class="spinner" wire:loading></div>
</div>
welcome.blade.php
<div>
<input wire:model="search" placeholder="Search">
</div>
When I write things in the input, it doesn't show the loder.
I want to call this loder only once and work on every page
As of today wire:loading only works in the scope of a single livewire component. There is no wire:loading.all.
Simple solution: create a blade component and name it e.g. x-loading
<div class="page-loading" wire:loading>
Loading...
</div>
Style the component such that it appears e.g. in the bottom right corner of the page. You might want to use position: absolute.
Place this component in the view of every livewire component you want to show the loading indicator for.
This solution comes with two drawbacks. First, if you try to position the loading indiator in a container that has absolute position (like a modal), it wont have the same position as you intended. Second, the loading blade component will be in every livewire component.
I just tested a more elegant solution. For this you have to use livewire js hooks: https://laravel-livewire.com/docs/2.x/reference
<script>
window.onload = function() {
Livewire.hook('message.sent', () => {
window.dispatchEvent(
new CustomEvent('loading', { detail: { loading: true }})
);
})
Livewire.hook('message.processed', (message, component) => {
window.dispatchEvent(
new CustomEvent('loading', { detail: { loading: false }})
);
})
}
</script>
<div
x-data="{ loading: false }"
x-show="loading"
#loading.window="loading = $event.detail.loading"
class="absolute z-50 bottom-20 right-20"
>
This is taking way too long...
</div>
Place this this code e.g. in your app layout.
I have created a fresh Laravel6 project to work out how to register components...
I have cloned ExampleComponent.vue to ExampleComponent2.vue
// ExampleComponent2.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example2 Component</div>
<div class="card-body">
I'm an example2 component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component2 mounted.')
}
}
</script>
// app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component2', require('./components/ExampleComponent2.vue').default);
// login.blade.php
- I have placed this under the closing tag and #endsection to test on the login page...
<example-component2></example-component2>
I have run "npm run watch" in command line and there are no error messages...
When I load the login route, I open the console to see this error message?
[Vue warn]: Unknown custom element: - did you
register the component correctly? For recursive components, make sure
to provide the "name" option.
(found in )
How do I register extra components???
// login.blade.php - I have placed this under the closing tag and #endsection to test on the login page...
You need an element with the id that you defined in your js/app.js:
const app = new Vue({
el: '#app', // you need an element with id="app". Your vue component will replace this
});
Then put your component inside that element.
//login.blade.php
#extends('layouts.authentication')
#section('content')
<div id="app">
<example-component2/>
</div>
#endsection
I am using Laravel 5.6 and create model named process and a controller with a function that gets all the records of the model:
public function showProcessList(){
return response()->json(Process::all());
}
In the web.php routes file also defined the route to retrieve the records, it works well, i tested the endpoint and i can see the data:
Route::get('process/list', 'ProcessController#showProcessList');
In a blade file i try to show the list creating a Vue component like this:
<!-- Process List -->
<div class="row">
<process></process>
</div>
<script src='{{ asset("public/js/app.js") }}'></script>
file app.js has this:
window.Vue = require('vue');
/**
* 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('process', require('./components/Process.vue'));
const app = new Vue({
el: '#app'
});
components/Process.vue contains this:
<template>
<div class="tile mb-4 col-md-6 col-lg-12" id="listProcess">
<div class="page-header">
<h3 class="mb-4 line-head">Process List</h3>
</div>
<div v-for="process in processList">
<p>{{ process.name }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
processList: [],
}
},
created() {
this.showProcessList();
},
methods: {
showProcessList () {
axios.get('/process/list')
.then(response => {
this.processList = response.body;
});
}
},
}
</script>
Then execute npm run dev and load in web browser the view that invoke the Vue component:
<div class="row">
<process></process>
</div>
<script src='{{ asset("public/js/app.js") }}'></script>
(I have to add public folder to the path of css and js files)
nothing happens, the data doesn't load in the view and i cannot see any error in console.
Testing the endpoint the result is:
[
{
"id": 1,
"created_at": "2018-03-28 04:33:02",
"updated_at": "2018-03-28 04:33:02",
"name": "first_process",
},
]
So, at this point i cannot see where is the error in my code or what i missing?
Thanks.
I have a Chat-User.vue file in components like
<template lang="html">
<div class="chat-user">
×
<h1>Users in Chat Room</h1>
<hr />
Number of users = {{ usersInRoom.length }}
<div class="users" style="overflow: hidden;">
<div class="col-sm-3 w3-margin-bottom" v-for="userInRoom in usersInRoom" style="overflow: hidden;">
<div class="u-1">
<img :src="userInRoom.profile" width="50" height="50">
</div>
<div class="u-2">
{{ userInRoom.name }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['usersInRoom']
}
</script>
My app.js file
Vue.component('chat-user', require('./components/Chat-User.vue'));
const app = new Vue({
el: '#app',
data: {
usersInRoom: []
},
});
and the indx.blade.php file
<div id="app">
<chat-user v-bind:usersInRoom="usersInRoom"></chat-user>
</div>
In usersInRoom variable it will add data's automatically.
But when I look the browser I cannot see any thing in the place of <chat-user></chat-user>, Just only <!---->.
I think it was commented out by vue for some reason. I tried removing all {{ usersInRoom }} and then I can see the other things like <h1>Users in Chat Room</h1> and the <hr>.
if I am not wrong The component file is not recognizing any variable like usersInRoom, when I have a variable like that.
Please some one tell me how to fix this problem.
Html directives are case insensitive, in the documentation Vue mentions that you need to use kebab-case in binding props.
Try <chat-user v-bind:users-in-room="usersInRoom"></chat-user> Which will bind to the usersInRoom prop.
you cant use camel case for props. u need to to use kebab case.
and binding from vue 1, you can remove the "v-bind" string and just directly start at :
<chat-user :users-in-room="usersInRoom"></chat-user>