Version: Vue 3.0.5
index.html.twig
<div id="app">
<div class="text-center">
<h3>My text rendered in Twig</h3>
<div class="jumbotron text-center">
<example></example>
</div>
</div>
</div>
</div>
entry-file.js
import { createApp } from 'vue';
import Example from './components/Example.vue'
createApp(Example).mount('#app');
components/Example.vue
<template>
<div>
<p>This is text from VueJs component</p>
</div>
</template>
<script>
export default {
name: 'example'
}
</script>
Currently, when I access the page Vue completely removes Twig content inside #app div and replaces it with text from the component.
My question are,
How can I keep initial #app content rendered by Twig and additionally compile <example></example> component by Vue?
Is it OK practice to mix it this way? The problem is that I already have blocks/widgets and custom logic based on backed variables in Twig and it will be far too long to rewrite everything in Vue
Related
Below is the html code:
<div id="loader" class="show">
<div class="loader"></div>
</div>
It is pasted in the index.html default js component of a react app (web app) and the problem is that app just loads and loads, it never reveals the contents of the page.
I guess you removed the div with id="root" because react render component inside that div. So the solution is you can place it inside id="root" div in your index.html file and it will show on loading and disappear whenever your first react component renders.
<div id="root">
<div id="loader" class="show">
<div class="loader"></div>
</div>
<div>
I was working on an Express app that uses Vue.js from a CDN and EJS as the templating engine. I create some Vuejs 'components' and import them into my EJS templates as partials. I don't know how it works but it does, I am curious as to why or how it actually works. I'm not using any bundler or anything. I wonder if there are any performance drawbacks also. thanks.
the batches.ejs
<div id="vue-home">
<main class="container">
<batches-component
v-bind:batches="<%= batches %>"
></batches-component>
</main>
</div>
<!-- Importing Batches component as partial -->
<%- include('components/batches.vue') %>
This is batches.vue
<template type="x-template" id="batches-component">
<div>
<div id="if-batches" v-if="batches.length > 0">
batches work!
</div>
</div>
</template>
I'm new to Laravel and Vue.js and am trying to setup Typescript with Vue + Blade. Whenever I visit my blade view it will only load the component without any of the blade template.
app.ts
import Vue from "vue";
import ListClubsComponent from "./components/clubs/list-clubs.vue";
new Vue({
el: "#app",
components: {
"list-clubs": ListClubsComponent
}
});
list.blade.php
#extends('templates.default')
#section('content')
<section id="clubs-container">
<h1>Clubs</h1>
<list-clubs :player="{!! $player !!}"></list-clubs>
</section>
#endsection
default.blade.php
<body>
<div id="app">
#include('templates.header')
<main>
#yield('content')
</main>
#include('templates.footer')
</div>
</body>
If I don't instantiate Vue on app.ts my blade template will load just fine. I only want to use Vue for components that will be loaded into my blade views.
Your Vue selector wraps all your content. Try wrapping only the components you want rendered with Vue using <div id="app">:
#extends('templates.default')
#section('content')
<section id="clubs-container">
<h1>Clubs</h1>
<div id="app">
<list-clubs :player="{!! $player !!}"></list-clubs>
</div>
</section>
#endsection
You only have a small amount of markup in list.blade.php. You can probably just move the markup into your Vue component:
#section('content')
<!-- All markup is in Vue component -->
<div id="app">
<list-clubs :player="{!! $player !!}"></list-clubs>
</div>
#endsection
Edit: I researched this a bit further for my own curiosity, looks like the blade template may fail to render any content if a Vue component is failing somewhere with an error.
I'have this template in my vue.js 2.0 app:
<template>
<div>
<button class="xs:w-full md:w-auto button-main" #click="show = true">
Open filters
</button>
<portal to="port-details">
<div class="modal" v-if="show">
<p>jow</p>
</div>
</portal>
</div>
</template>
I need to remove the surrounding div because otherwise my markup looks weird. But if I remove that I obviously will get this error:
Component template should contain exactly one root element
How could I accomplish this?
I'm trying to create a re-usable base modal component and make use of slots to provide the modal content... It creates the application and modal. On button click the modal displays, but without the content. How can I get my content to display within the content specified slot? Am I using slot's incorrectly?
Here's a fiddle to help illustrate my problem : https://jsfiddle.net/70yyx8z2/19/
// register base modal component
Vue.component('modal', {
template: '#modal-template'
})
// register content component for modal
Vue.component('modal-content', {
template: '#modal-content'
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
<modal v-if="showModal" #close="showModal = false">
<h3 slot="header">Header here</h3>
<!--
How can I use slot to render the modal content component?
-->
<modal-content></modal-content>
</modal>
JsFiddle Working Example
You can't specify a slot name inside the component as it won't be mounted before the slot replacement takes place. Instead you can assign the component to the slot
<!-- modal content component -->
<script type="text/x-template" id="modal-content">
<form>
<h2>This should show...</h2>
<input type="text" placeholder="user name" />
</form>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<h3 slot="header">Header here</h3>
<!--
How can I use slot to render the modal content component?
-->
<modal-content slot="body"></modal-content>
</modal>
</div>
EDIT: Fixed a small bit of nomenclature related issue as noticed by #thanksd
Technically all you need to do is this.
<modal-content slot="body"></modal-content>
You probably want to remove the modal-container from the modal-content component.
Here is your fiddle updated.