1
0
mirror of https://github.com/nuxt/nuxt.git synced 2024-12-18 10:17:16 +00:00
Nuxt/examples/named-views/pages/index.vue
Andrey Shertsinger b1b9e0bcbc feat(vue-app): support named views ()
* support named views for extendRoutes config

* fix lint errors

* fix lint errors 2

* some refactoring

* var rename

* fixture & unit tests

* fix: style

* nuxt-child named view example and test

* nuxt element with named view in layout

* lint
2018-12-20 16:50:22 +01:00

74 lines
1.1 KiB
Vue
Executable File

<template lang="html">
<div class="main">
<h1>Hello there</h1>
<p>This is an example of a named views</p>
<ul>
<li>
<NuxtLink to="/">
Root
</NuxtLink>
</li>
<li>
<NuxtLink to="/section">
Section
</NuxtLink>
</li>
<li>
<NuxtLink to="/child/123">
Child 123
</NuxtLink>
</li>
<li>
<NuxtLink to="/child/234">
Child 234
</NuxtLink>
</li>
<li>
<NuxtLink to="/main">
Main page with named view in layout
</NuxtLink>
</li>
</ul>
<hr>
<div>
<div class="left">
<NuxtChild name="left" />
</div>
<div class="content">
<NuxtChild />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Stage'
}
</script>
<style scoped>
.main {
margin: auto;
max-width: 420px;
padding: 10px;
}
.left {
max-width: 150px;
display: inline-block;
vertical-align: top;
border: 1px;
}
.left:empty {
display: none;
}
.content {
display: inline-block;
}
</style>