I have the following...
PageHeader.vue
<template>
<span> ${message} </span>
</template>
<script>
export default{
data: function(){
return {message: "asdsad" };
}
}
</script>
app.vue
<template>
<jg-header></jg-header>
</template>
<script>
import PageHeader from "./PageHeader.vue"
export default{
components: {
"jg-header": PageHeader
}
}
</script>
This works great so I want to convert it to using Vue Material so I change app.vue to this...
<template>
<md-app> <jg-header></jg-header> </md-app>
</template>
<script>
import PageHeader from "./PageHeader.vue"
export default{
components: {
"jg-header": PageHeader
}
}
</script>
It seems to create and render the Vue material component, however, the custom component doesn't show up anywhere. How do I get the Vue component to actually render inside the md-app
Update
Since there was some confusion, I create the Vue app I do call Vue.use (hence why it renders)
Vue.use(VueMaterial);
new Vue(App).$mount("#my-id");
<md-app> has specific content elements. Wrap your content in <md-app-content>.
Instead of:
<template>
<md-app> <jg-header></jg-header> </md-app>
</template>
Do:
<template>
<md-app>
<md-app-content>
<jg-header></jg-header>
<md-app-content>
</md-app>
</template>
Or, with a toolbar:
<template>
<md-app>
<md-app-toolbar> ... </md-app-toolbar>
<md-app-content>
<jg-header></jg-header>
<md-app-content>
</md-app>
</template>
Try wrapping the tags inside template with a div :
<template>
<div>
<md-app>
<jg-header></jg-header>
</md-app>
</div>
</template>
Related
The task of having to write
<transition name="fade">
<div v-if="condition">
</div>
</transition>
Is manual labour. Is there any shortcut way of wrapping every v-if with a transition?
You can create a custom Vue component:
// AppTransition.vue
<template>
<transition name='fade'>
<div v-if='show'>
<slot />
</div>
</transition>
</template>
<script>
export default {
props: {
show: Boolean
}
}
</script>
and then use it as follows:
<template>
<AppTransition :show='condition'>
<div>Hello, world</div>
</AppTransition>
</template>
<script>
// You can avoid importing it everywhere by making it a global component, see https://vuejs.org/guide/components/registration.html
import AppTransition from './AppTransition'
export default {
components: { AppTransition }
}
</script>
Is it possible?
I have something like this:
<template>
<my-layout>
<template #header>
Some header html goes here
</template>
Body html here
</my-layout>
</template>
<script>
import MyLayout from './MyLayout.vue'
export default {
layout: MyLayout,
components: {
//MyLayout
}
}
</script>
And template like that
<template>
<div>
<slot name="header"/>
</div>
<slot/>
</template>
The default slot works, but "header" slot doesn't display itself (unless using MyLayout as standard component).
I believe there is a problem with the closing tags on the template you have given and it should be like the following:
<template>
<div>
<slot name="header"> </slot>
</div>
</template>
After that, layout property only excepts strings or functions that return strings, so parent should be like the following:
<template>
<my-layout>
<template #header>
Some header html goes here
</template>
Body html here
</my-layout>
</template>
<script>
import MyLayout from "./MyLayout.vue";
export default {
layout: "MyLayout",
components: {
//MyLayout
}
};
</script>
I hope this solves your problem and have a nice day :)
I have a BaseModal Component like this :
<template>
<div class="base-modal" :class="{open: isOpen}">
<div class="modal">
<h2 class="modal-title">
<slot name="title"></slot>
</h2>
<div class="modal-content">
<slot name="content"></slot>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
#Component({})
export default class BaseModal extends Vue {
public isOpen: boolean = false;
// Some methods
}
</script>
I want to create an other modal component that will extend this one and pass it the content for the named slots. Here is where I am :
<template>
// How to give slots content here
</template>
<script lang="ts">
import BaseModal from "#app/components/BaseModal.vue";
import { Vue, Prop, Component } from "vue-property-decorator";
#Component({
extends: BaseModal,
})
export default class OtherDropdown extends Vue {
}
</script>
The extends is working but I can't figure out how to pass content to the named slot of the extended component. Not to have to write again all the BaseModal template.
Thanks
I'm using VueJS 2.6.8
You would want to use components named slots like this:
<template>
<BaseModal>
<template v-slot:title>
Some Title
</template>
<template v-slot:content>
Some content goes here
</template>
</BaseModal>
</template>
You can read more about named slots here: https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots
Hope this helps!
I have a collection of images, audios and videos that should be displayed by a component one by one. All media is placed in assets sub-directories.
Given a simple Vue component for images like:
<template>
<img :src="src" :alt="src"></a>
</template>
<script>
export default {
name: "ImgDisplay",
props: ['src']
}
</script>
if I try to use it on some page:
<template>
<ImgDisplay src="~/assets/test.png"/>
</template>
the image is not actually displayed.
Vue component for MP3-files looks like this:
<template>
<vue-plyr>
<audio controls>
<source :src="src" type="audio/mp3"/>
</audio>
</vue-plyr>
</template>
<script>
export default {
name: "PlyrAudio",
props: ['src']
}
</script>
Then in document I have:
<template>
<div>
<article class="infobox">
<h6>Recording 1</h6>
<PlyrAudio src="~/assets/media/recording-1.mp3"/>
</article>
<article class="infobox">
<h6>Recording 2</h6>
<PlyrAudio src="~/assets/media/recording-2.mp3"/>
</article>
</div>
</template>
<script>
import PlyrAudio from "../components/media/PlyrAudio";
export default {
name: "PlyrAudioTest",
components: {PlyrAudio}
}
</script>
which does not work either, PlyrAudio component does not seem to find referenced mp3 files.
How can one use Nuxt.js aliases (~, ~~, #, ##) in component attributes? Is there some dedicated function to resolve ~ in <script> section of ImgDisplay and PlyrAudio or am I missing something?
I have a Card component that I'd like to inherit a title value from the <Card /> tag's title property defined within the parent layout after passing through a <Cards></Cards> component's slot.
Card:
<template>
<div class="card">
{{ title }}
</div>
</template>
<script lang="ts">
import Component from 'nuxt-class-component'
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'
#Component
export default class extends Vue {
#Prop() title: string
}
</script>
Cards:
<template>
<div class="cards">
<slot></slot>
</div>
</template>
Page:
<template>
<Cards>
<Card :title="ABC" />
</Cards>
</template>
I'm not quite sure how to reference the title property. How is this written in Vue?
You should be able to do this by defining a title property in the Card component:
Card:
<template>
<div class="card">
{{ title }}
</div>
</template>
<script>
export default {
props: ['title']
}
</script>