mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 06:05:11 +00:00
refactor: use PascalCase for components names (#4396)
This commit is contained in:
Clark Du
Pooya Parsa
parent
ecdc7bcc25
commit
52a92fbc48
13
.eslintrc.js
13
.eslintrc.js
@ -12,6 +12,19 @@ module.exports = {
|
||||
rules: {
|
||||
'vue/name-property-casing': ['error', 'kebab-case']
|
||||
}
|
||||
},{
|
||||
files: [
|
||||
'examples/storybook/**',
|
||||
'examples/with-element-ui/**',
|
||||
'examples/with-museui/**',
|
||||
'examples/with-vue-material/**',
|
||||
'examples/with-vuetify/**',
|
||||
'examples/with-vuikit/**',
|
||||
'examples/with-vux/**',
|
||||
],
|
||||
rules: {
|
||||
'vue/component-name-in-template-casing': ['warn', 'kebab-case']
|
||||
}
|
||||
}, {
|
||||
files: [ 'test/fixtures/*/.nuxt*/**/+(App|index).js' ],
|
||||
rules: {
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="n in 10000" :key="n">This is row {{ n + 1 }}</li>
|
||||
<li v-for="n in 10000" :key="n">
|
||||
This is row {{ n + 1 }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<nuxt-link to="/">NUXT BLOG</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
NUXT BLOG
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<p class="links">
|
||||
<a href="https://twitter.com/nuxt_js" target="_blank"><img src="~/assets/img/twitter.png"></a>
|
||||
<a href="https://github.com/nuxt/nuxt.js/tree/dev/examples/async-component-injection" target="_blank"><img src="~/assets/img/github.png"></a>
|
||||
<a href="https://twitter.com/nuxt_js" target="_blank">
|
||||
<img src="~/assets/img/twitter.png">
|
||||
</a>
|
||||
<a href="https://github.com/nuxt/nuxt.js/tree/dev/examples/async-component-injection" target="_blank">
|
||||
<img src="~/assets/img/github.png">
|
||||
</a>
|
||||
</p>
|
||||
<div class="main">
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="post">
|
||||
<component :is="component" />
|
||||
<Component :is="component" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,9 +2,17 @@
|
||||
<ul>
|
||||
<li v-for="(post, index) in posts" :key="index">
|
||||
<h3>{{ post.date }}</h3>
|
||||
<h2><nuxt-link :to="post.link">{{ post.title }}</nuxt-link></h2>
|
||||
<h2>
|
||||
<NuxtLink :to="post.link">
|
||||
{{ post.title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
</li>
|
||||
<li style="border:none;text-align: center;font-size: 14px;">
|
||||
Design from <a href="http://blog.evanyou.me" target="_blank">
|
||||
EvanYou.me
|
||||
</a>
|
||||
</li>
|
||||
<li style="border:none;text-align: center;font-size: 14px;">Design from <a href="http://blog.evanyou.me" target="_blank">EvanYou.me</a></li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<template>
|
||||
<h1 style="text-align: center;">Article not found</h1>
|
||||
<h1 style="text-align: center;">
|
||||
Article not found
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="date">Jul 10, 2017</h3>
|
||||
<h3 class="date">
|
||||
Jul 10, 2017
|
||||
</h3>
|
||||
<h1>Deep dive into the Ocean</h1>
|
||||
<div class="content">
|
||||
<img src="~/assets/img/swimmer.jpg">
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="date">Jul 08, 2017</h3>
|
||||
<h3 class="date">
|
||||
Jul 08, 2017
|
||||
</h3>
|
||||
<h1>Welcome to my blog</h1>
|
||||
<div class="content">
|
||||
<h2>What is Lorem Ipsum?</h2>
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<div class="container">
|
||||
<h1>User Agent</h1>
|
||||
<p>{{ userAgent }}</p>
|
||||
<p><nuxt-link to="/posts">Blog</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/posts">
|
||||
Blog
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<div class="container">
|
||||
<h1>{{ post.title }}</h1>
|
||||
<pre>{{ post.body }}</pre>
|
||||
<p><nuxt-link to="/posts">Back to the list</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/posts">
|
||||
Back to the list
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -4,10 +4,16 @@
|
||||
<h1>Blog</h1>
|
||||
<ul>
|
||||
<li v-for="(post, index) in posts" :key="index">
|
||||
<nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
|
||||
<NuxtLink :to="{ name: 'posts-id', params: { id: post.id } }">
|
||||
{{ post.title }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
<p><nuxt-link to="/">Back to home page</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back to home page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="$store.state.auth">
|
||||
<p>You are authenticated. You can see the
|
||||
<nuxt-link to="/secret">secret page</nuxt-link>!
|
||||
<p>
|
||||
You are authenticated. You can see the
|
||||
<NuxtLink to="/secret">
|
||||
secret page
|
||||
</NuxtLink>!
|
||||
</p>
|
||||
<button @click="logout">Logout</button>
|
||||
<button @click="logout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<p v-else>Please
|
||||
<nuxt-link to="/login">login</nuxt-link>.
|
||||
<p v-else>
|
||||
Please
|
||||
<NuxtLink to="/login">
|
||||
login
|
||||
</NuxtLink>.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
<label for="password">
|
||||
<input id="password" type="password" value="test">
|
||||
</label>
|
||||
<button @click="postLogin">login</button>
|
||||
<button @click="postLogin">
|
||||
login
|
||||
</button>
|
||||
<p>The credentials are not verified for the example purpose.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>This is secret page.</h1>
|
||||
<nuxt-link to="/">Back home</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,19 +2,29 @@
|
||||
<div class="container">
|
||||
<h1>Please login to see the secret content</h1>
|
||||
<form v-if="!$store.state.authUser" @submit.prevent="login">
|
||||
<p v-if="formError" class="error">{{ formError }}</p>
|
||||
<p v-if="formError" class="error">
|
||||
{{ formError }}
|
||||
</p>
|
||||
<p><i>To login, use <b>demo</b> as username and <b>demo</b> as password.</i></p>
|
||||
<p>Username: <input v-model="formUsername" type="text" name="username"></p>
|
||||
<p>Password: <input v-model="formPassword" type="password" name="password"></p>
|
||||
<button type="submit">Login</button>
|
||||
<button type="submit">
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
<div v-else>
|
||||
Hello {{ $store.state.authUser.username }}!
|
||||
<pre>I am the secret content, I am shown only when the use is connected.</pre>
|
||||
<p><i>You can also refresh this page, you'll still be connected!</i></p>
|
||||
<button @click="logout">Logout</button>
|
||||
<button @click="logout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<p><nuxt-link to="/secret">Super secret page</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/secret">
|
||||
Super secret page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<div>
|
||||
<h1>Super secret page</h1>
|
||||
<p>If you try to access this URL not connected, you will see the error page telling your that you are not connected.</p>
|
||||
<nuxt-link to="/">Back to the home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Back to the home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dark">
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<img src="logo.png">
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1 v-if="error.statusCode === 404">Page not found</h1>
|
||||
<h1 v-else>An error occurred</h1>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<h1 v-if="error.statusCode === 404">
|
||||
Page not found
|
||||
</h1>
|
||||
<h1 v-else>
|
||||
An error occurred
|
||||
</h1>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Hi from {{ name }}</p>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Welcome!</h1>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p>About Page</p>
|
||||
<nuxt-link to="/">Go to /</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Go to /
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p>Hello {{ name }}!</p>
|
||||
<nuxt-link to="/about">Go to /about</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
Go to /about
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
<div class="container">
|
||||
<p>About Page</p>
|
||||
<p>It should take 5 seconds for the loader to disappear</p>
|
||||
<p>It should take 5 seconds for the route to change after you
|
||||
<span class="link" @click="goToFinal">click here</span></p>
|
||||
<p>
|
||||
It should take 5 seconds for the route to change after you
|
||||
<span class="link" @click="goToFinal">
|
||||
click here
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p>Final Page</p>
|
||||
<nuxt-link to="/">Go to /</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Go to /
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p>Hello {{ name }}!</p>
|
||||
<nuxt-link to="/about">Go to /about</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
Go to /about
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
<h2>Users</h2>
|
||||
<ul class="users">
|
||||
<li v-for="user in users" :key="user.id">
|
||||
<nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
|
||||
<NuxtLink :to="'/users/'+user.id">
|
||||
{{ user.name }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<h3>{{ name }}</h3>
|
||||
<h4>@{{ username }}</h4>
|
||||
<p>Email : {{ email }}</p>
|
||||
<p><nuxt-link to="/">List of users</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
List of users
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
<template>
|
||||
<p>Please look at <code>server.js</code> to see how to use <a href="https://nuxtjs.org">Nuxt.js</a> programmatically.</p>
|
||||
<p>
|
||||
Please look at <code>server.js</code> to see how to use <a href="https://nuxtjs.org">
|
||||
Nuxt.js
|
||||
</a> programmatically.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -9,21 +9,29 @@
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
class="uil-ring"
|
||||
><rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100"
|
||||
height="100"
|
||||
fill="none"
|
||||
class="bk"
|
||||
/><defs><filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter></defs><path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="#59ebff" filter="url(#uil-ring-shadow)"><animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 50 50"
|
||||
to="360 50 50"
|
||||
repeatCount="indefinite"
|
||||
dur="1s"
|
||||
/></path></svg>
|
||||
>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100"
|
||||
height="100"
|
||||
fill="none"
|
||||
class="bk"
|
||||
/><defs>
|
||||
<filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
|
||||
</filter>
|
||||
</defs><path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="#59ebff" filter="url(#uil-ring-shadow)">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 50 50"
|
||||
to="360 50 50"
|
||||
repeatCount="indefinite"
|
||||
dur="1s"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Nuxt Chat</h1>
|
||||
<transition-group name="list" tag="ul">
|
||||
<TransitionGroup name="list" tag="ul">
|
||||
<li v-for="(message, index) in messages" :key="index">
|
||||
<component :is="message.component" :data="message.data" />
|
||||
<Component :is="message.component" :data="message.data" />
|
||||
</li>
|
||||
</transition-group>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Nuxt Chat</h1>
|
||||
<transition-group name="list" tag="ul">
|
||||
<TransitionGroup name="list" tag="ul">
|
||||
<li v-for="(message, index) in messages" :key="index">
|
||||
<component :is="message.component" :data="message.data" />
|
||||
<Component :is="message.component" :data="message.data" />
|
||||
</li>
|
||||
</transition-group>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1 v-if="error.statusCode === 404">Page not found</h1>
|
||||
<h1 v-else>An error occurred</h1>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<h1 v-if="error.statusCode === 404">
|
||||
Page not found
|
||||
</h1>
|
||||
<h1 v-else>
|
||||
An error occurred
|
||||
</h1>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="dark">
|
||||
<div class="mobile-banner">Mobile website</div>
|
||||
<nuxt />
|
||||
<div class="mobile-banner">
|
||||
Mobile website
|
||||
</div>
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Hi from {{ name }}</p>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Welcome!</h1>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<h1 class="title">Another Page</h1>
|
||||
<p><nuxt-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</nuxt-link></p>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
<h1 class="title">
|
||||
Another Page
|
||||
</h1>
|
||||
<p>
|
||||
<NuxtLink to="/" class="button is-medium is-info hvr-wobble-vertical">
|
||||
Another button
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<h1 class="title">Custom CSS!</h1>
|
||||
<p><nuxt-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</nuxt-link></p>
|
||||
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||
<h1 class="title">
|
||||
Custom CSS!
|
||||
</h1>
|
||||
<p>
|
||||
<NuxtLink to="/about" class="button is-medium is-primary hvr-float-shadow">
|
||||
I am a button
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Hi from {{ name }}</p>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome!</h1>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,24 +2,26 @@
|
||||
<div>
|
||||
<header class="Header">
|
||||
<div class="container">
|
||||
<h1 class="Header__Title">Nuxt i18n</h1>
|
||||
<h1 class="Header__Title">
|
||||
Nuxt i18n
|
||||
</h1>
|
||||
<nav class="Header__Menu">
|
||||
<nuxt-link :to="$i18n.path('')" class="Header__Link" exact>
|
||||
<NuxtLink :to="$i18n.path('')" class="Header__Link" exact>
|
||||
{{ $t('links.home') }}
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="$i18n.path('about')" class="Header__Link" exact>
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="$i18n.path('about')" class="Header__Link" exact>
|
||||
{{ $t('links.about') }}
|
||||
</nuxt-link>
|
||||
<nuxt-link v-if="$i18n.locale === 'en'" :to="`/fr` + $route.fullPath" class="Header__Link" active-class="none" exact>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$i18n.locale === 'en'" :to="`/fr` + $route.fullPath" class="Header__Link" active-class="none" exact>
|
||||
{{ $t('links.french') }}
|
||||
</nuxt-link>
|
||||
<nuxt-link v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" class="Header__Link" active-class="none" exact>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" class="Header__Link" active-class="none" exact>
|
||||
{{ $t('links.english') }}
|
||||
</nuxt-link>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="Content">
|
||||
<div class="container">
|
||||
<h1 class="Content__Title">{{ $t('about.title') }}</h1>
|
||||
<h1 class="Content__Title">
|
||||
{{ $t('about.title') }}
|
||||
</h1>
|
||||
<p>{{ $t('about.introduction') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="Content">
|
||||
<div class="container">
|
||||
<h1 class="Content__Title">{{ $t('home.title') }}</h1>
|
||||
<h1 class="Content__Title">
|
||||
{{ $t('home.title') }}
|
||||
</h1>
|
||||
<p>{{ $t('home.introduction') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<p id="hello-msg">Hi from {{ name }}</p>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<p id="hello-msg">
|
||||
Hi from {{ name }}
|
||||
</p>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome!</h1>
|
||||
<nuxt-link id="about-link" to="/about">About page</nuxt-link>
|
||||
<NuxtLink id="about-link" to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
return <div class='container'>
|
||||
<h1>About page</h1>
|
||||
<test data='I am test component' />
|
||||
<p><nuxt-link to='/'>Home page</nuxt-link></p>
|
||||
<p><NuxtLink to='/'>Home page</NuxtLink></p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
render() {
|
||||
return <div class='container'>
|
||||
<h1>Home page 🚀</h1>
|
||||
<nuxt-link to='/about'>About page</nuxt-link>
|
||||
<NuxtLink to='/about'>About page</NuxtLink>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Secondary Layout</h1>
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>About page</h1>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,9 +1,21 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home page</h1>
|
||||
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||
<p><nuxt-link to="/users">Lists of users</nuxt-link></p>
|
||||
<p><nuxt-link to="/users-2">Lists of users #2 (with `watch`)</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/users">
|
||||
Lists of users
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/users-2">
|
||||
Lists of users #2 (with `watch`)
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,19 +1,31 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">< Prev</nuxt-link>
|
||||
<a v-else class="disabled">< Prev</a>
|
||||
<NuxtLink v-if="page > 1" :to="'?page=' + (page - 1)">
|
||||
< Prev
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
< Prev
|
||||
</a>
|
||||
<span>{{ page }}/{{ totalPages }}</span>
|
||||
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next ></nuxt-link>
|
||||
<a v-else class="disabled">Next ></a>
|
||||
<transition :name="transitionName" mode="out-in">
|
||||
<NuxtLink v-if="page < totalPages" :to="'?page=' + (page + 1)">
|
||||
Next >
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
Next >
|
||||
</a>
|
||||
<Transition :name="transitionName" mode="out-in">
|
||||
<ul :key="page">
|
||||
<li v-for="user in users" :key="user.id">
|
||||
<img :src="user.avatar" class="avatar">
|
||||
<span>{{ user.first_name }} {{ user.last_name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
</Transition>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">< Prev</nuxt-link>
|
||||
<a v-else class="disabled">< Prev</a>
|
||||
<NuxtLink v-if="page > 1" :to="'?page=' + (page - 1)">
|
||||
< Prev
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
< Prev
|
||||
</a>
|
||||
<span>{{ page }}/{{ totalPages }}</span>
|
||||
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next ></nuxt-link>
|
||||
<a v-else class="disabled">Next ></a>
|
||||
<NuxtLink v-if="page < totalPages" :to="'?page=' + (page + 1)">
|
||||
Next >
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
Next >
|
||||
</a>
|
||||
<ul>
|
||||
<li v-for="user in users" :key="user.id">
|
||||
<img :src="user.avatar" class="avatar">
|
||||
<span>{{ user.first_name }} {{ user.last_name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -21,7 +33,7 @@ import axios from 'axios'
|
||||
export default {
|
||||
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
|
||||
watchQuery: ['page'],
|
||||
// Key for <nuxt-child> (transitions)
|
||||
// Key for <NuxtChild> (transitions)
|
||||
key: to => to.fullPath,
|
||||
// Called to know which transition to apply
|
||||
transition(to, from) {
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
# About Page!
|
||||
Current route is: {{ $route.name }}
|
||||
|
||||
<nuxt-link to="/">Back home</nuxt-link>
|
||||
<NuxtLink to="/">Back home</NuxtLink>
|
||||
</template>
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
Data model is: {{ model }}
|
||||
|
||||
<nuxt-link to="/about">Goto About</nuxt-link>
|
||||
<NuxtLink to="/about">Goto About</NuxtLink>
|
||||
|
||||
<nuxt-link to="/pug">Goto Pug</nuxt-link>
|
||||
<NuxtLink to="/pug">Goto Pug</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
<div class="container">
|
||||
<h1>About page</h1>
|
||||
<p>Check the source code to see the custom meta tags added with our custom component <code>twitter-head-card</code></p>
|
||||
<twitter-head-card />
|
||||
<p><nuxt-link to="/">Home page</nuxt-link></p>
|
||||
<TwitterHeadCard />
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home page 🚀</h1>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="(visit, index) in visits" :key="index"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
|
||||
<li v-for="(visit, index) in visits" :key="index">
|
||||
<i>{{ visit.date | hours }}</i> - {{ visit.path }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<nuxt />
|
||||
<visits />
|
||||
<Nuxt />
|
||||
<Visits />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,9 +3,15 @@
|
||||
<h1>{{ $route.params.slug || 'Home' }}</h1>
|
||||
<pre>{{ userAgent }}</pre>
|
||||
<ul>
|
||||
<li><nuxt-link to="/">Home</nuxt-link></li>
|
||||
<li>
|
||||
<NuxtLink to="/">
|
||||
Home
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li v-for="(slug, index) in slugs" :key="index">
|
||||
<nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link>
|
||||
<NuxtLink :to="{ name: 'slug', params: { slug } }">
|
||||
{{ slug }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<h1 class="title">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<template lang="html">
|
||||
<div class="main">
|
||||
<post title="My first blog post">
|
||||
<v-p>Hello there</v-p>
|
||||
<v-p>This is an example of a componentized blog post</v-p>
|
||||
</post>
|
||||
<Post title="My first blog post">
|
||||
<VP>Hello there</VP>
|
||||
<VP>This is an example of a componentized blog post</VP>
|
||||
</Post>
|
||||
|
||||
<v-hr />
|
||||
<VHr />
|
||||
|
||||
<post title="My second blog post">
|
||||
<v-p>Hello there</v-p>
|
||||
<v-p>This is another example.</v-p>
|
||||
<v-p>Wa-hoo!</v-p>
|
||||
</post>
|
||||
<Post title="My second blog post">
|
||||
<VP>Hello there</VP>
|
||||
<VP>This is another example.</VP>
|
||||
<VP>Wa-hoo!</VP>
|
||||
</Post>
|
||||
|
||||
<v-hr />
|
||||
<VHr />
|
||||
|
||||
<post title="The final blog post">
|
||||
<v-p>C'est la fin !</v-p>
|
||||
</post>
|
||||
<Post title="The final blog post">
|
||||
<VP>C'est la fin !</VP>
|
||||
</Post>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from '~/components/post'
|
||||
import vP from '~/components/paragraph'
|
||||
const vHr = { render: h => h('hr', { class: 'hr' }) }
|
||||
import VP from '~/components/paragraph'
|
||||
const VHr = { render: h => h('hr', { class: 'hr' }) }
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Post,
|
||||
'v-p': vP,
|
||||
'v-hr': vHr
|
||||
VP,
|
||||
VHr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<h2><nuxt-link to="/">Players</nuxt-link></h2>
|
||||
<h2>
|
||||
<NuxtLink to="/">
|
||||
Players
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<ul class="players">
|
||||
<li v-for="user in users" :key="user.id">
|
||||
<nuxt-link :to="'/'+user.id">{{ user.name }}</nuxt-link>
|
||||
<NuxtLink :to="'/'+user.id">
|
||||
{{ user.name }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nuxt-child :key="$route.params.id" />
|
||||
<NuxtChild :key="$route.params.id" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h1>Home</h1>
|
||||
<no-ssr placeholder="Loading...">
|
||||
<NoSsr placeholder="Loading...">
|
||||
<h2>This part is rendered on the client-side only</h2>
|
||||
</no-ssr>
|
||||
<no-ssr>
|
||||
</NoSsr>
|
||||
<NoSsr>
|
||||
<p><code>placeholder</code> prop is optional</p>
|
||||
</no-ssr>
|
||||
</NoSsr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<img :src="thumbnailUrl">
|
||||
<p><nuxt-link to="/">Home</nuxt-link> - About</p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Home
|
||||
</NuxtLink> - About
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p><button @click="showLoginError">Notif me!</button></p>
|
||||
<p>Home - <nuxt-link to="/about">About</nuxt-link></p>
|
||||
<p>
|
||||
<button @click="showLoginError">
|
||||
Notif me!
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
Home - <NuxtLink to="/about">
|
||||
About
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<div :class="$store.state.theme" class="theme">
|
||||
<div class="nav horizontal-align">
|
||||
<nuxt-link class="nav-item" to="/">Home</nuxt-link>
|
||||
<nuxt-link class="nav-item" to="/about">About</nuxt-link>
|
||||
<nuxt-link class="nav-item" to="/parent">Parent page</nuxt-link>
|
||||
<NuxtLink class="nav-item" to="/">
|
||||
Home
|
||||
</NuxtLink>
|
||||
<NuxtLink class="nav-item" to="/about">
|
||||
About
|
||||
</NuxtLink>
|
||||
<NuxtLink class="nav-item" to="/parent">
|
||||
Parent page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<nuxt class="container" />
|
||||
<Nuxt class="container" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Page with meta</h1>
|
||||
<p>This example is made to illustrate the usafe of
|
||||
<p>
|
||||
This example is made to illustrate the usafe of
|
||||
<code>meta</code> inside the page components.
|
||||
</p>
|
||||
<p>We have a middleware setup in
|
||||
<p>
|
||||
We have a middleware setup in
|
||||
<code>~/middleware/theme.js</code> used to get which theme has to be applied and commit it to the store.
|
||||
</p>
|
||||
<p>Then, in our layout, we simply use
|
||||
<p>
|
||||
Then, in our layout, we simply use
|
||||
<code>$store.state.theme</code> as a class to change our CSS dynamically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
<div>
|
||||
<h1>Parent</h1>
|
||||
Checkout
|
||||
<nuxt-link to="/parent/blue">Blue page</nuxt-link>
|
||||
<nuxt-child />
|
||||
<NuxtLink to="/parent/blue">
|
||||
Blue page
|
||||
</NuxtLink>
|
||||
<NuxtChild />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
<div>
|
||||
<h3>I am the blue page</h3>
|
||||
<p>I am a child of /parent, and the theme is overwritten by myself!</p>
|
||||
<p>Go back to
|
||||
<nuxt-link to="/parent">Parent</nuxt-link>
|
||||
<p>
|
||||
Go back to
|
||||
<NuxtLink to="/parent">
|
||||
Parent
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>About page</h1>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home page</h1>
|
||||
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||
<p><nuxt-link to="/users">Lists of users</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/users">
|
||||
Lists of users
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">< Prev</nuxt-link>
|
||||
<a v-else class="disabled">< Prev</a>
|
||||
<NuxtLink v-if="page > 1" :to="'?page=' + (page - 1)">
|
||||
< Prev
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
< Prev
|
||||
</a>
|
||||
<span>{{ page }}/{{ totalPages }}</span>
|
||||
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next ></nuxt-link>
|
||||
<a v-else class="disabled">Next ></a>
|
||||
<NuxtLink v-if="page < totalPages" :to="'?page=' + (page + 1)">
|
||||
Next >
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
Next >
|
||||
</a>
|
||||
<ul>
|
||||
<li v-for="user in users" :key="user.id">
|
||||
<img :src="user.avatar" class="avatar">
|
||||
<span>{{ user.first_name }} {{ user.last_name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -21,7 +33,7 @@ import axios from 'axios'
|
||||
export default {
|
||||
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
|
||||
watchQuery: ['page'],
|
||||
// Key for <nuxt-child> (transitions)
|
||||
// Key for <NuxtChild> (transitions)
|
||||
key: to => to.fullPath,
|
||||
// Called to know which transition to apply
|
||||
transition(to, from) {
|
||||
|
||||
@ -3,14 +3,20 @@
|
||||
<h1>About page</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<nuxt-link to="/about/profile">Profile</nuxt-link>
|
||||
<NuxtLink to="/about/profile">
|
||||
Profile
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<nuxt-link to="/about/contact">Contact</nuxt-link>
|
||||
<NuxtLink to="/about/contact">
|
||||
Contact
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
<nuxt-child />
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtChild />
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,10 +1,26 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home page</h1>
|
||||
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||
<p><nuxt-link to="/users">Lists of users</nuxt-link></p>
|
||||
<p><nuxt-link to="/long">Long page</nuxt-link></p>
|
||||
<p><nuxt-link to="/long#anchor">Long page #anchor</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/users">
|
||||
Lists of users
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/long">
|
||||
Long page
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<p>
|
||||
<NuxtLink to="/long#anchor">
|
||||
Long page #anchor
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<div class="spacer" style="width: 100%; height: 3000px; background: grey" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Long page</h1>
|
||||
<p><a href="#anchor">Go to anchor</a></p>
|
||||
<p>
|
||||
<a href="#anchor">
|
||||
Go to anchor
|
||||
</a>
|
||||
</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque turpis, tempor vitae accumsan eget, bibendum eget dui. Vestibulum fringilla mi ac nunc malesuada accumsan. Proin mattis, ex vitae rhoncus dapibus, tellus tortor tincidunt metus, sed scelerisque dolor nunc rhoncus enim. Pellentesque semper interdum quam in placerat. Sed ut finibus mi. Aliquam placerat tellus ac tincidunt sodales. Quisque pharetra neque a risus placerat, sed suscipit felis mattis. Maecenas pretium efficitur fringilla. Sed commodo leo congue velit pretium, in consequat ex egestas. Pellentesque gravida vitae elit varius condimentum. Fusce in magna tellus. Proin in odio ac est elementum pharetra.</p>
|
||||
<p>Vivamus dapibus libero sem, eu sagittis lorem hendrerit id. Suspendisse faucibus sapien quis cursus lobortis. Phasellus blandit tellus at arcu ornare fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac massa sollicitudin, lacinia lacus porta, cursus mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc aliquam quis elit ut maximus. Integer blandit ipsum sed elit laoreet consequat. Pellentesque quis volutpat tellus, vitae finibus nulla. Etiam a porta orci. Morbi at libero sit amet tortor eleifend congue. Integer egestas fermentum lacinia. Curabitur dignissim, enim eget consectetur tempor, lacus felis auctor ante, in egestas arcu turpis ut tellus. Phasellus mattis dictum leo, a gravida purus tristique sed. Pellentesque sollicitudin arcu eu augue vehicula, molestie hendrerit sapien mollis.</p>
|
||||
<p>Nunc ullamcorper magna nunc, vitae vestibulum est laoreet vel. Aliquam erat volutpat. Duis vehicula ligula at justo egestas posuere. Mauris pharetra nulla ac pretium eleifend. Mauris purus eros, venenatis sollicitudin ornare id, mattis in lorem. Curabitur tortor magna, viverra eget lorem ultricies, aliquam aliquam libero. Maecenas vestibulum id libero sed fermentum. Praesent consequat dui sed pellentesque commodo. Curabitur finibus purus vel purus mattis luctus. Nullam maximus dapibus orci, ac mattis diam egestas vel. Praesent lorem dolor, congue quis gravida commodo, rhoncus nec justo. In et elementum augue. Donec fringilla imperdiet magna, quis luctus leo placerat sed. Morbi scelerisque in sem eu dapibus. Sed interdum, felis luctus semper viverra, ex lorem posuere velit, in bibendum nunc dolor et diam.</p>
|
||||
@ -12,7 +16,9 @@
|
||||
<p>Nunc ullamcorper magna nunc, vitae vestibulum est laoreet vel. Aliquam erat volutpat. Duis vehicula ligula at justo egestas posuere. Mauris pharetra nulla ac pretium eleifend. Mauris purus eros, venenatis sollicitudin ornare id, mattis in lorem. Curabitur tortor magna, viverra eget lorem ultricies, aliquam aliquam libero. Maecenas vestibulum id libero sed fermentum. Praesent consequat dui sed pellentesque commodo. Curabitur finibus purus vel purus mattis luctus. Nullam maximus dapibus orci, ac mattis diam egestas vel. Praesent lorem dolor, congue quis gravida commodo, rhoncus nec justo. In et elementum augue. Donec fringilla imperdiet magna, quis luctus leo placerat sed. Morbi scelerisque in sem eu dapibus. Sed interdum, felis luctus semper viverra, ex lorem posuere velit, in bibendum nunc dolor et diam.</p>
|
||||
<p>Duis pulvinar lorem vel tempus pellentesque. Vivamus imperdiet imperdiet augue, ac rhoncus velit vulputate eu. Sed sed nulla risus. Curabitur ut velit consectetur, semper velit quis, elementum tellus. Ut eget ligula eget leo porta vestibulum. Curabitur ligula magna, rutrum ut enim vitae, gravida sollicitudin augue. Aliquam auctor gravida mauris, nec feugiat ipsum mollis vel. Vivamus nec aliquet ipsum, id scelerisque nibh. Vestibulum iaculis eleifend nunc, vitae efficitur massa egestas et. Ut pulvinar, purus eget viverra sodales, est mauris luctus metus, non luctus tellus diam in elit.</p>
|
||||
<p>Quisque sollicitudin non urna non consectetur. Cras quis dapibus nisi. Maecenas maximus rhoncus neque, a lacinia urna egestas nec. Morbi molestie odio sit amet tempus cursus. Vivamus lorem nunc, malesuada et maximus id, imperdiet eget felis. Ut elementum fringilla velit in mattis. Morbi ut laoreet mi. Aliquam et odio dignissim, fermentum purus sit amet, facilisis lorem. Donec semper mi ut semper tristique. Sed in dolor placerat, porta elit in, tempor felis. Integer metus erat, tristique efficitur quam quis, finibus blandit magna. Nunc sit amet lorem dui. Suspendisse ut vulputate nisi. Integer sit amet sollicitudin libero.</p>
|
||||
<h2 id="anchor">Anchor</h2>
|
||||
<h2 id="anchor">
|
||||
Anchor
|
||||
</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque turpis, tempor vitae accumsan eget, bibendum eget dui. Vestibulum fringilla mi ac nunc malesuada accumsan. Proin mattis, ex vitae rhoncus dapibus, tellus tortor tincidunt metus, sed scelerisque dolor nunc rhoncus enim. Pellentesque semper interdum quam in placerat. Sed ut finibus mi. Aliquam placerat tellus ac tincidunt sodales. Quisque pharetra neque a risus placerat, sed suscipit felis mattis. Maecenas pretium efficitur fringilla. Sed commodo leo congue velit pretium, in consequat ex egestas. Pellentesque gravida vitae elit varius condimentum. Fusce in magna tellus. Proin in odio ac est elementum pharetra.</p>
|
||||
<p>Vivamus dapibus libero sem, eu sagittis lorem hendrerit id. Suspendisse faucibus sapien quis cursus lobortis. Phasellus blandit tellus at arcu ornare fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ac massa sollicitudin, lacinia lacus porta, cursus mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc aliquam quis elit ut maximus. Integer blandit ipsum sed elit laoreet consequat. Pellentesque quis volutpat tellus, vitae finibus nulla. Etiam a porta orci. Morbi at libero sit amet tortor eleifend congue. Integer egestas fermentum lacinia. Curabitur dignissim, enim eget consectetur tempor, lacus felis auctor ante, in egestas arcu turpis ut tellus. Phasellus mattis dictum leo, a gravida purus tristique sed. Pellentesque sollicitudin arcu eu augue vehicula, molestie hendrerit sapien mollis.</p>
|
||||
<p>Nunc ullamcorper magna nunc, vitae vestibulum est laoreet vel. Aliquam erat volutpat. Duis vehicula ligula at justo egestas posuere. Mauris pharetra nulla ac pretium eleifend. Mauris purus eros, venenatis sollicitudin ornare id, mattis in lorem. Curabitur tortor magna, viverra eget lorem ultricies, aliquam aliquam libero. Maecenas vestibulum id libero sed fermentum. Praesent consequat dui sed pellentesque commodo. Curabitur finibus purus vel purus mattis luctus. Nullam maximus dapibus orci, ac mattis diam egestas vel. Praesent lorem dolor, congue quis gravida commodo, rhoncus nec justo. In et elementum augue. Donec fringilla imperdiet magna, quis luctus leo placerat sed. Morbi scelerisque in sem eu dapibus. Sed interdum, felis luctus semper viverra, ex lorem posuere velit, in bibendum nunc dolor et diam.</p>
|
||||
@ -23,7 +29,9 @@
|
||||
<p>Nunc ullamcorper magna nunc, vitae vestibulum est laoreet vel. Aliquam erat volutpat. Duis vehicula ligula at justo egestas posuere. Mauris pharetra nulla ac pretium eleifend. Mauris purus eros, venenatis sollicitudin ornare id, mattis in lorem. Curabitur tortor magna, viverra eget lorem ultricies, aliquam aliquam libero. Maecenas vestibulum id libero sed fermentum. Praesent consequat dui sed pellentesque commodo. Curabitur finibus purus vel purus mattis luctus. Nullam maximus dapibus orci, ac mattis diam egestas vel. Praesent lorem dolor, congue quis gravida commodo, rhoncus nec justo. In et elementum augue. Donec fringilla imperdiet magna, quis luctus leo placerat sed. Morbi scelerisque in sem eu dapibus. Sed interdum, felis luctus semper viverra, ex lorem posuere velit, in bibendum nunc dolor et diam.</p>
|
||||
<p>Duis pulvinar lorem vel tempus pellentesque. Vivamus imperdiet imperdiet augue, ac rhoncus velit vulputate eu. Sed sed nulla risus. Curabitur ut velit consectetur, semper velit quis, elementum tellus. Ut eget ligula eget leo porta vestibulum. Curabitur ligula magna, rutrum ut enim vitae, gravida sollicitudin augue. Aliquam auctor gravida mauris, nec feugiat ipsum mollis vel. Vivamus nec aliquet ipsum, id scelerisque nibh. Vestibulum iaculis eleifend nunc, vitae efficitur massa egestas et. Ut pulvinar, purus eget viverra sodales, est mauris luctus metus, non luctus tellus diam in elit.</p>
|
||||
<p>Quisque sollicitudin non urna non consectetur. Cras quis dapibus nisi. Maecenas maximus rhoncus neque, a lacinia urna egestas nec. Morbi molestie odio sit amet tempus cursus. Vivamus lorem nunc, malesuada et maximus id, imperdiet eget felis. Ut elementum fringilla velit in mattis. Morbi ut laoreet mi. Aliquam et odio dignissim, fermentum purus sit amet, facilisis lorem. Donec semper mi ut semper tristique. Sed in dolor placerat, porta elit in, tempor felis. Integer metus erat, tristique efficitur quam quis, finibus blandit magna. Nunc sit amet lorem dui. Suspendisse ut vulputate nisi. Integer sit amet sollicitudin libero.</p>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">< Prev</nuxt-link>
|
||||
<a v-else class="disabled">< Prev</a>
|
||||
<NuxtLink v-if="page > 1" :to="'?page=' + (page - 1)">
|
||||
< Prev
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
< Prev
|
||||
</a>
|
||||
<span>{{ page }}/{{ totalPages }}</span>
|
||||
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next ></nuxt-link>
|
||||
<a v-else class="disabled">Next ></a>
|
||||
<NuxtLink v-if="page < totalPages" :to="'?page=' + (page + 1)">
|
||||
Next >
|
||||
</NuxtLink>
|
||||
<a v-else class="disabled">
|
||||
Next >
|
||||
</a>
|
||||
<ul>
|
||||
<li v-for="user in users" :key="user.id">
|
||||
<img :src="user.avatar" class="avatar">
|
||||
<span>{{ user.first_name }} {{ user.last_name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -21,7 +33,7 @@ import axios from 'axios'
|
||||
export default {
|
||||
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
|
||||
watchQuery: ['page'],
|
||||
// Key for <nuxt-child> (transitions)
|
||||
// Key for <NuxtChild> (transitions)
|
||||
key: to => to.fullPath,
|
||||
// Called to know which transition to apply
|
||||
transition(to, from) {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Hi from {{ name }}</p>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
<NuxtLink to="/">
|
||||
Home page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome!</h1>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
<NuxtLink to="/about">
|
||||
About page
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,7 +3,11 @@
|
||||
<img src="~static/nuxt-black.png">
|
||||
<h2>Thank you for testing nuxt.js</h2>
|
||||
<p>Loaded from the {{ name }}</p>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
Back home
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,7 +2,11 @@
|
||||
<div class="container">
|
||||
<img src="nuxt.png">
|
||||
<h2>Hello World.</h2>
|
||||
<p><nuxt-link to="/about">About</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/about">
|
||||
About
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<button :style="{color: color, borderColor: color}" :class="{rounded: rounded}" class="wr-button" @click="handleClick"><slot />!</button>
|
||||
<button :style="{color: color, borderColor: color}" :class="{rounded: rounded}" class="wr-button" @click="handleClick">
|
||||
<slot />!
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon v-if="item.items">keyboard_arrow_down</v-icon>
|
||||
<v-icon v-if="item.items">
|
||||
keyboard_arrow_down
|
||||
</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-list-tile v-for="subItem in item.items" :key="subItem.title">
|
||||
@ -29,7 +31,6 @@
|
||||
</v-list-tile>
|
||||
</v-list-group>
|
||||
</v-list>
|
||||
|
||||
</v-navigation-drawer>
|
||||
<v-toolbar app fixed clipped-left>
|
||||
<v-toolbar-side-icon @click.stop="drawer = !drawer" />
|
||||
@ -40,7 +41,9 @@
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-card dark color="primary">
|
||||
<v-card-text class="px-0"><slot /></v-card-text>
|
||||
<v-card-text class="px-0">
|
||||
<slot />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@ -50,12 +53,13 @@
|
||||
<v-layout justify-center align-center>
|
||||
<v-tooltip right>
|
||||
<v-btn slot="activator" :href="source" icon large target="_blank">
|
||||
<v-icon large>code</v-icon>
|
||||
<v-icon large>
|
||||
code
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<span>Source</span>
|
||||
</v-tooltip>
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
</v-content>
|
||||
<v-footer app fixed>
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
|
||||
<p>The repo for this project exists here
|
||||
<p>
|
||||
The repo for this project exists here
|
||||
<a
|
||||
class="link"
|
||||
href="https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate"
|
||||
@ -21,7 +22,9 @@
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
|
||||
<code class="code">src/stories</code>
|
||||
<code class="code">
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
(Basically a story is like a visual test case.)
|
||||
@ -29,17 +32,25 @@
|
||||
<p>
|
||||
See these sample
|
||||
|
||||
<a class="link" role="button" tabIndex="0" @click.prevent="showApp">stories</a>
|
||||
<a class="link" role="button" tabIndex="0" @click.prevent="showApp">
|
||||
stories
|
||||
</a>
|
||||
for a component called
|
||||
|
||||
<code class="code">Button</code> .
|
||||
<code class="code">
|
||||
Button
|
||||
</code> .
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
You can also edit those components and see changes right away.
|
||||
(Try editing the
|
||||
<code class="code">Button</code> component located at
|
||||
<code class="code">src/stories/Button.js</code>.)
|
||||
<code class="code">
|
||||
Button
|
||||
</code> component located at
|
||||
<code class="code">
|
||||
src/stories/Button.js
|
||||
</code>.)
|
||||
</p>
|
||||
<p>
|
||||
This is just one thing you can do with Storybook.
|
||||
@ -54,11 +65,12 @@
|
||||
<b>NOTE:</b>
|
||||
Have a look at the
|
||||
|
||||
<code class="code">.storybook/webpack.config.js</code>
|
||||
<code class="code">
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</v-container>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
@ -67,7 +67,9 @@
|
||||
<v-list>
|
||||
<v-list-tile @click.native="right = !right">
|
||||
<v-list-tile-action>
|
||||
<v-icon light>compare_arrows</v-icon>
|
||||
<v-icon light>
|
||||
compare_arrows
|
||||
</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
|
||||
@ -6,24 +6,44 @@
|
||||
<vuetify-logo />
|
||||
</div>
|
||||
<v-card>
|
||||
<v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title>
|
||||
<v-card-title class="headline">
|
||||
Welcome to the Vuetify + Nuxt.js template
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to empower developers to create amazing applications.</p>
|
||||
<p>For more information on Vuetify, check out the <a href="https://vuetifyjs.com" target="_blank">documentation</a>.</p>
|
||||
<p>If you have questions, please join the official <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">discord</a>.</p>
|
||||
<p>Find a bug? Report it on the github <a href="https://github.com/vuetifyjs/vuetify/issues" target="_blank" title="contribute">issue board</a>.</p>
|
||||
<p>
|
||||
For more information on Vuetify, check out the <a href="https://vuetifyjs.com" target="_blank">
|
||||
documentation
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
If you have questions, please join the official <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">
|
||||
discord
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
Find a bug? Report it on the github <a href="https://github.com/vuetifyjs/vuetify/issues" target="_blank" title="contribute">
|
||||
issue board
|
||||
</a>.
|
||||
</p>
|
||||
<p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in the future.</p>
|
||||
<div class="text-xs-right">
|
||||
<em><small>— John Leider</small></em>
|
||||
</div>
|
||||
<hr class="my-3">
|
||||
<a href="https://nuxtjs.org/" target="_blank">Nuxt Documentation</a>
|
||||
<a href="https://nuxtjs.org/" target="_blank">
|
||||
Nuxt Documentation
|
||||
</a>
|
||||
<br>
|
||||
<a href="https://github.com/nuxt/nuxt.js" target="_blank">Nuxt GitHub</a>
|
||||
<a href="https://github.com/nuxt/nuxt.js" target="_blank">
|
||||
Nuxt GitHub
|
||||
</a>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="primary" flat nuxt to="/inspire">Continue</v-btn>
|
||||
<v-btn color="primary" flat nuxt to="/inspire">
|
||||
Continue
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
|
||||
@ -41,7 +41,7 @@ Then in your pages, you can use directly:
|
||||
<template>
|
||||
<div class="main">
|
||||
<p>Page with SCSS</p>
|
||||
<p><nuxt-link to="/less">LESS</nuxt-link></p>
|
||||
<p><NuxtLink to="/less">LESS</NuxtLink></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<p>Page with SCSS</p>
|
||||
<p><nuxt-link to="/less">LESS</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/less">
|
||||
LESS
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<p>Page with LESS</p>
|
||||
<p><nuxt-link to="/">SCSS</nuxt-link></p>
|
||||
<p>
|
||||
<NuxtLink to="/">
|
||||
SCSS
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">My Component Button</button>
|
||||
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
|
||||
My Component Button
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="p-10">
|
||||
<h1 class="mb-6">Nuxt Tailwind CSS + Purgecss</h1>
|
||||
<nuxt />
|
||||
<h1 class="mb-6">
|
||||
Nuxt Tailwind CSS + Purgecss
|
||||
</h1>
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="mb-4 text-blue">Homepage</h2>
|
||||
<p class="mb-4 bg-grey-light p-4 text-sm rounded leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dolor placerat enim suscipit porttitor et sodales orci. In eget lorem a odio rhoncus finibus vel quis ex. Donec varius nisl ligula, vel finibus velit dignissim in.</p>
|
||||
<my-component />
|
||||
<h2 class="mb-4 text-blue">
|
||||
Homepage
|
||||
</h2>
|
||||
<p class="mb-4 bg-grey-light p-4 text-sm rounded leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dolor placerat enim suscipit porttitor et sodales orci. In eget lorem a odio rhoncus finibus vel quis ex. Donec varius nisl ligula, vel finibus velit dignissim in.
|
||||
</p>
|
||||
<MyComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- See https://tailwindcss.com/docs/container -->
|
||||
<div class="container mx-auto">
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
<a href="https://github.com/nuxt/nuxt.js/tree/dev/examples/tailwindcss" class="inline-flex items-center no-underline mt-4 rounded-full border border-grey-light bg-grey-lightest text-xs text-grey-darkest font-semibold p-2">
|
||||
<span class="inline-flex rounded-full mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mt-4 bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
|
||||
<p class="font-bold">Be Warned!</p>
|
||||
<p class="font-bold">
|
||||
Be Warned!
|
||||
</p>
|
||||
<p>This page has been {{ mode }}-side rendered!</p>
|
||||
</div>
|
||||
<button class="mt-4 bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded" @click="$router.push('/')">
|
||||
|
||||
@ -3,15 +3,27 @@
|
||||
<div class="max-w-sm mt-4 rounded overflow-hidden shadow-lg">
|
||||
<img class="w-full" src="https://tailwindcss.com/img/card-top.jpg">
|
||||
<div class="px-6 py-4">
|
||||
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
|
||||
<p class="text-slate text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
|
||||
<div class="font-bold text-xl mb-2">
|
||||
The Coldest Sunset
|
||||
</div>
|
||||
<p class="text-slate text-base">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate">#winter</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">
|
||||
#photography
|
||||
</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">
|
||||
#travel
|
||||
</span>
|
||||
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-slate">
|
||||
#winter
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-blue mt-4 hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" @click="$router.push('/about')">About</button>
|
||||
<button class="bg-blue mt-4 hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" @click="$router.push('/about')">
|
||||
About
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
<div class="ba b--black-20 mw5 ma2">
|
||||
<img :src="'https://robots.johnlindquist.com/' + person.first_name + '_' + person.last_name">
|
||||
<div class="flex flex-column items-center pa2 b--black-20">
|
||||
<div class="f4">{{ person.first_name }} {{ person.last_name }}</div>
|
||||
<button class="w-100 bg-blue dim mv2 pv2 bn pointer" @click="select(person.id)">Select</button>
|
||||
<div class="f4">
|
||||
{{ person.first_name }} {{ person.last_name }}
|
||||
</div>
|
||||
<button class="w-100 bg-blue dim mv2 pv2 bn pointer" @click="select(person.id)">
|
||||
Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<section class="pa4">
|
||||
<div class="bg-white-90 pa4">
|
||||
<div class="f1">Nuxt TypeScript Starter</div>
|
||||
<div class="f3">Selected Person: {{ selectedPerson.first_name }} {{ selectedPerson.last_name }}</div>
|
||||
<div class="f1">
|
||||
Nuxt TypeScript Starter
|
||||
</div>
|
||||
<div class="f3">
|
||||
Selected Person: {{ selectedPerson.first_name }} {{ selectedPerson.last_name }}
|
||||
</div>
|
||||
{{ selected }}
|
||||
</div>
|
||||
<div class="flex flex-wrap ph2 justify-between bg-white-80">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="uk-container">
|
||||
<nuxt />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user