mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Simplify example
This commit is contained in:
Sébastien Chopin
parent
8eb6b5e3b6
commit
eabcf490b1
@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<nuxt-container>
|
||||
<nav class="Navbar clearfix">
|
||||
<h1 class="Navbar__Title">
|
||||
Nuxt Custom Routes
|
||||
</h1>
|
||||
<ul class="Navbar__Links">
|
||||
<li class="Navbar__Links__Item">
|
||||
<nuxt-link to="/team" class="Navbar__Links__Item__Link">
|
||||
Basic route
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="Navbar__Links__Item">
|
||||
<nuxt-link to="/projects" class="Navbar__Links__Item__Link">
|
||||
Dynamic routes
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="Navbar__Links__Item">
|
||||
<nuxt-link to="/users" class="Navbar__Links__Item__Link">
|
||||
Nested routes
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="Navbar__Links__Item">
|
||||
<nuxt-link to="/posts" class="Navbar__Links__Item__Link">
|
||||
Dynamic nested routes
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nuxt/>
|
||||
</nuxt-container>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html, body
|
||||
{
|
||||
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
letter-spacing: 0.25px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
*, *::before, *::after
|
||||
{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
.clearfix:before, .clearfix:after
|
||||
{
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.container {
|
||||
margin: 30px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.Navbar
|
||||
{
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 0;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
.Navbar__Title
|
||||
{
|
||||
float: left;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
}
|
||||
.Navbar__Links
|
||||
{
|
||||
float: right;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.Navbar__Links__Item
|
||||
{
|
||||
float: left;
|
||||
margin: 5px 15px;
|
||||
}
|
||||
.Navbar__Links__Item__Link
|
||||
{
|
||||
color: #000;
|
||||
}
|
||||
a, a:hover
|
||||
{
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #41B883;
|
||||
}
|
||||
|
||||
.nuxt-link-active {
|
||||
color: #41B883 !important;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bounce-enter-active {
|
||||
animation: bounce-in .8s;
|
||||
}
|
||||
.bounce-leave-active {
|
||||
animation: bounce-out .5s;
|
||||
}
|
||||
@keyframes bounce-in {
|
||||
0% { transform: scale(0) }
|
||||
100% { transform: scale(1) }
|
||||
}
|
||||
@keyframes bounce-out {
|
||||
0% { transform: scale(1) }
|
||||
100% { transform: scale(0) }
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,5 @@
|
||||
module.exports = {
|
||||
build: {
|
||||
vendor: ['axios']
|
||||
},
|
||||
generate: {
|
||||
routeParams: {
|
||||
'/users/:id': [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}],
|
||||
'/posts/:slug': [{slug: 'foo'}, {slug: 'bar'}],
|
||||
'/posts/:slug/comments': [{slug: 'foo'}, {slug: 'bar'}],
|
||||
'/posts/:slug/:name': [{slug: 'foo', name: 'b'}, {slug: 'bar', name: 'a'}],
|
||||
'/projects/:slug': [{slug: 'toto'}, {slug: 'titi'}, {slug: 'tutu'}]
|
||||
}
|
||||
},
|
||||
transition: 'fade',
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,46 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home</h1>
|
||||
<h2>
|
||||
Examples of custom routes
|
||||
</h2>
|
||||
<h2>Users</h2>
|
||||
<ul class="users">
|
||||
<li v-for="user in users">
|
||||
<nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return axios.get('https://jsonplaceholder.typicode.com/users')
|
||||
.then((res) => {
|
||||
return { users: res.data }
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
text-align: center;
|
||||
margin-top: 100px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.users {
|
||||
list-style-type: none;
|
||||
}
|
||||
.users li a {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
border: 1px #ddd solid;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
}
|
||||
.users li a:hover {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Dynamic nested route example</h1>
|
||||
<nuxt-child></nuxt-child>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2>Post : {{ $route.params.slug }}</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
<nuxt-link :to="{ name: 'posts-slug-name', params: { name: 'foo'} }">Foo</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'posts-slug-name', params: { name: 'bar'} }">Bar</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'posts-slug-comments' }">Comments</nuxt-link>
|
||||
</p>
|
||||
<nuxt-child :key="$route.params.name"></nuxt-child>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p
|
||||
{
|
||||
text-align: center;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
a
|
||||
{
|
||||
margin: 0 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2>{{ $route.params.name }}</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
transition: {
|
||||
name: 'bounce',
|
||||
// css: true,
|
||||
beforeEnter (el) {
|
||||
console.log('Before enter');
|
||||
},
|
||||
enter (el) {
|
||||
console.log('Enter')
|
||||
// done()
|
||||
},
|
||||
afterEnter (el) {
|
||||
console.log('After enter')
|
||||
},
|
||||
enterCancelled (el) {
|
||||
console.log('Enter cancelled')
|
||||
},
|
||||
beforeLeave (el) {
|
||||
console.log('Before leave')
|
||||
},
|
||||
leave (el) {
|
||||
console.log('Leave')
|
||||
// done()
|
||||
},
|
||||
afterLeave (el) {
|
||||
console.log('After leave')
|
||||
},
|
||||
leaveCancelled (el) {
|
||||
console.log('Leave cancelled')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p
|
||||
{
|
||||
text-align: center;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
Comments only
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2>Posts list</h2>
|
||||
<p>
|
||||
<nuxt-link to="/posts/welcome">
|
||||
Welcome post
|
||||
</nuxt-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Dynamic route example</h1>
|
||||
<h2>Project : {{ $route.params.slug }}</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
validate ({ params }) {
|
||||
return /^[A-z]+$/.test(params.slug)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p
|
||||
{
|
||||
padding: 15px 30px;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Dynamic route example</h1>
|
||||
<h2>Projects list</h2>
|
||||
<p>
|
||||
<nuxt-link :to="{ name: 'projects-slug', params: { slug: 'nuxtjs'} }">
|
||||
Nuxt.js
|
||||
</nuxt-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Team</h1>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="container clearfix">
|
||||
<h1>Nested routes example</h1>
|
||||
<h2>Users list</h2>
|
||||
<ul class="users">
|
||||
<li v-for="user in users">
|
||||
<nuxt-link :to="{ name: 'users-id', params: { id: user.id } }">{{ user.name }}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
<nuxt-child :key="$route.params.id"></nuxt-child>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
transition: 'bounce',
|
||||
data () {
|
||||
return axios.get('https://jsonplaceholder.typicode.com/users')
|
||||
.then((res) => {
|
||||
return { users: res.data }
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.users {
|
||||
margin: 10px 0;
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
}
|
||||
.users li a {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
border: 1px #ddd solid;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
}
|
||||
.users li a:hover {
|
||||
color: #41b883;
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2>User</h2>
|
||||
<h3>{{ user.name }}</h3>
|
||||
<h4>@{{ user.username }}</h4>
|
||||
<p>Email : {{ user.email }}</p>
|
||||
<p><nuxt-link to="/users">List of users</nuxt-link></p>
|
||||
<div class="user">
|
||||
<h3>{{ name }}</h3>
|
||||
<h4>@{{ username }}</h4>
|
||||
<p>Email : {{ email }}</p>
|
||||
<p><nuxt-link to="/">List of users</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,13 +11,12 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
transition (to, from) {
|
||||
if (!from || !from.params.id || !to.params.id) return 'fade'
|
||||
return +to.params.id > +from.params.id ? 'slide-left' : 'slide-right'
|
||||
validate ({ params }) {
|
||||
return !isNaN(+params.id)
|
||||
},
|
||||
data ({ params, error }) {
|
||||
return axios.get(`https://jsonplaceholder.typicode.com/users/${params.id}`)
|
||||
.then((res) => { return { user: res.data } })
|
||||
return axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
|
||||
.then((res) => res.data)
|
||||
.catch(() => {
|
||||
error({ message: 'User not found', statusCode: 404 })
|
||||
})
|
||||
@ -27,21 +25,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container
|
||||
{
|
||||
.user {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
min-height: 440px;
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
.slide-left-enter,
|
||||
.slide-right-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate(30px, 0);
|
||||
}
|
||||
.slide-left-leave-active,
|
||||
.slide-right-enter {
|
||||
opacity: 0;
|
||||
transform: translate(-30px, 0);
|
||||
margin-top: 100px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user