Nuxt/examples/dynamic-components/pages/index.vue

72 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<div>
2017-07-08 23:44:59 +00:00
<h1>Nuxt Chat</h1>
2017-07-09 00:35:07 +00:00
<transition-group name="list" tag="ul">
<li v-for="(message, index) in messages" :key="index">
<component :is="message.component" :data="message.data"/>
2017-07-08 23:44:59 +00:00
</li>
2017-07-09 00:35:07 +00:00
</transition-group>
</div>
2017-07-08 23:44:59 +00:00
</template>
<script>
import streamMessages from '@/js/messages.js'
// Dynamic components
const components = {
2017-09-21 20:27:30 +00:00
vText: () => import('@/components/text.vue' /* webpackChunkName: "components/text" */),
vImage: () => import('@/components/image.vue' /* webpackChunkName: "components/image" */),
vCode: () => import('@/components/code.vue' /* webpackChunkName: "components/code" */),
2017-10-20 06:45:34 +00:00
vChart: () => import('@/components/chart.js' /* webpackChunkName: "components/chart" */).then((m) => m.default())
2017-07-08 23:44:59 +00:00
}
export default {
components,
2017-07-08 23:44:59 +00:00
data: () => ({
messages: []
}),
2017-10-31 13:43:55 +00:00
mounted() {
2017-09-21 20:27:30 +00:00
// Listen for incoming messages
2017-07-08 23:44:59 +00:00
streamMessages(async (message) => {
2017-09-21 20:27:30 +00:00
// Wait for the component to load before displaying it
2017-07-08 23:44:59 +00:00
await components[message.component]()
// Add the message to the list
this.messages.push(message)
})
}
2017-07-08 23:44:59 +00:00
}
</script>
<style scoped>
h1 {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
2017-09-04 19:25:40 +00:00
width: 100%;
2017-07-08 23:44:59 +00:00
max-width: 300px;
margin: auto;
}
ul li {
display: block;
width: 100%;
border-radius: 20px;
margin-bottom: 5px;
font-family: Helvetica, Arial, sans-serif;
background: white;
border: 1px #ddd solid;
overflow: hidden;
2017-07-09 00:35:07 +00:00
opacity: 1;
}
.list-enter-active, .list-leave-active {
transition: all 0.4s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(20px);
2017-07-08 23:44:59 +00:00
}
2017-09-04 19:25:40 +00:00
</style>