Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Inline rendering of a custom component
<template>
<div id="app">
<img src="./assets/logo.png">
<div v-show="showMessage">{{message}}</div>
<div v-show="items.length > 0">I like</div>
<ul>
<li v-for="(item, index) in items" v-bind:key="index">{{item}}</li>
</ul>
<router-view/>
<!--This is what we declared as the tag for our custom component-->
<test-component/>
</div>
</template>
<script>
//Let's import our TestComponent
import TestComponentVue from '@/components/TestComponent';
export default {
name: 'App',
//tell App.vue that we want to declare some components for use in this component
components: {
// use kebab case for the tag that you will use in the template above and map it to our component
// The name part of this can be anything. You could even call the name as 'some-component' and still set its value to TestComponentVue.
// However, you should then remember to use the corresponding value in the template above.
'test-component': TestComponentVue
},
data() {
return {
showMessage: true,
message: 'Hello, World!',
items: ['Cake', 'Coding']
};
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.