refactor: use eslint-plugin-vue instead of eslint-plugin-html (#3517)

This commit is contained in:
Clark Du 2018-07-12 13:03:50 +01:00 committed by Sébastien Chopin
parent d31aeaad6c
commit 2b5c367efa
97 changed files with 445 additions and 418 deletions

View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
root: true, root: true,
parser: 'babel-eslint',
parserOptions: { parserOptions: {
parser: 'babel-eslint',
sourceType: 'module' sourceType: 'module'
}, },
env: { env: {
@ -13,10 +13,11 @@ module.exports = {
'standard', 'standard',
'standard-jsx', 'standard-jsx',
'plugin:import/errors', 'plugin:import/errors',
'plugin:import/warnings' 'plugin:import/warnings',
"plugin:vue/recommended"
], ],
plugins: [ plugins: [
'html', 'vue',
'jest' 'jest'
], ],
settings: { settings: {
@ -48,13 +49,16 @@ module.exports = {
// Do not allow console.logs etc... // Do not allow console.logs etc...
'no-console': 2, 'no-console': 2,
'space-before-function-paren': [ 'space-before-function-paren': [2, {
2, anonymous: 'always',
{ named: 'never'
anonymous: 'always', }],
named: 'never' 'vue/no-parsing-error': [2, {
} 'x-invalid-end-tag': false
], }],
"vue/max-attributes-per-line": [2, {
"singleline": 5,
}]
}, },
globals: {} globals: {}

View File

@ -12,4 +12,3 @@
</div> </div>
</div> </div>
</template> </template>

View File

@ -1,8 +1,8 @@
<template> <template>
<ul> <ul>
<li v-for="(post, index) in posts" :key="index"> <li v-for="(post, index) in posts" :key="index">
<h3>{{ post.date }}</h3> <h3>{{ post.date }}</h3>
<h2><nuxt-link :to="post.link">{{ post.title }}</nuxt-link></h2> <h2><nuxt-link :to="post.link">{{ post.title }}</nuxt-link></h2>
</li> </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> </ul>

View File

@ -10,7 +10,7 @@
<ul> <ul>
<li>Vue.js</li> <li>Vue.js</li>
<li>Nuxt.js</li> <li>Nuxt.js</li>
<li>= <3</li> <li>= &lt;3</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -2,10 +2,10 @@
<div class="container"> <div class="container">
<h1>Please login to see the secret content</h1> <h1>Please login to see the secret content</h1>
<form v-if="!$store.state.authUser" @submit.prevent="login"> <form v-if="!$store.state.authUser" @submit.prevent="login">
<p class="error" v-if="formError">{{ 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><i>To login, use <b>demo</b> as username and <b>demo</b> as password.</i></p>
<p>Username: <input type="text" v-model="formUsername" name="username" /></p> <p>Username: <input v-model="formUsername" type="text" name="username" ></p>
<p>Password: <input type="password" v-model="formPassword" name="password" /></p> <p>Password: <input v-model="formPassword" type="password" name="password" ></p>
<button type="submit">Login</button> <button type="submit">Login</button>
</form> </form>
<div v-else> <div v-else>

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<h1>Dog</h1> <h1>Dog</h1>
<img :src="dog" /> <img :src="dog" >
</div> </div>
</template> </template>

View File

@ -8,7 +8,7 @@
<script> <script>
export default { export default {
name: 'date', name: 'Date',
serverCacheKey() { serverCacheKey() {
// Will change every 10 secondes // Will change every 10 secondes
return Math.floor(Date.now() / 10000) return Math.floor(Date.now() / 10000)

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="VueToNuxtLogo"> <div class="VueToNuxtLogo">
<div class="Triangle Triangle--two"></div> <div class="Triangle Triangle--two"/>
<div class="Triangle Triangle--one"></div> <div class="Triangle Triangle--one"/>
<div class="Triangle Triangle--three"></div> <div class="Triangle Triangle--three"/>
<div class="Triangle Triangle--four"></div> <div class="Triangle Triangle--four"/>
</div> </div>
</template> </template>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<p><img src="~/assets/nuxt.png" /></p> <p><img src="~/assets/nuxt.png" ></p>
<p>This image is included as data:image/png;base64...</p> <p>This image is included as data:image/png;base64...</p>
<p>In the source code, the files generated are based on the build.filenames data.</p> <p>In the source code, the files generated are based on the build.filenames data.</p>
</div> </div>

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<img src="logo.png"/> <img src="logo.png">
<nuxt/> <nuxt/>
</div> </div>
</template> </template>

View File

@ -8,7 +8,12 @@
<script> <script>
export default { export default {
props: ['error'] props: {
error: {
type: Object,
default: null
}
}
} }
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="loading-page" v-if="loading"> <div v-if="loading" class="loading-page">
<p>Loading...</p> <p>Loading...</p>
</div> </div>
</template> </template>

View File

@ -5,7 +5,10 @@
<script> <script>
export default { export default {
props: { props: {
data: String data: {
type: String,
default: ''
}
} }
} }
</script> </script>
@ -17,4 +20,4 @@ pre {
margin: 0; margin: 0;
padding: 20px; padding: 20px;
} }
</style> </style>

View File

@ -1,14 +1,36 @@
<template> <template>
<div> <div>
<img v-if="loaded" :src="data" alt="image" /> <img v-if="loaded" :src="data" alt="image" >
<svg v-else width="60px" height="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><defs><filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0"></feGaussianBlur><feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend></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"></animateTransform></path></svg> <svg
v-else
width="60px"
height="60px"
xmlns="http://www.w3.org/2000/svg"
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>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: String data: {
type: String,
default: ''
}
}, },
data: () => ({ data: () => ({
loaded: false loaded: false
@ -35,4 +57,4 @@ svg {
position: relative; position: relative;
left: -30px; left: -30px;
} }
</style> </style>

View File

@ -1,11 +1,14 @@
<template> <template>
<p v-html="data"></p> <p v-html="data"/>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: String data: {
type: String,
default: ''
}
} }
} }
</script> </script>
@ -14,4 +17,4 @@ export default {
p { p {
padding: 5px 20px; padding: 5px 20px;
} }
</style> </style>

View File

@ -3,7 +3,7 @@
<h1>Nuxt Chat</h1> <h1>Nuxt Chat</h1>
<transition-group name="list" tag="ul"> <transition-group name="list" tag="ul">
<li v-for="(message, index) in messages" :key="index"> <li v-for="(message, index) in messages" :key="index">
<component :is="message.component" :data="message.data"></component> <component :is="message.component" :data="message.data"/>
</li> </li>
</transition-group> </transition-group>
</div> </div>
@ -20,6 +20,7 @@ const components = {
} }
export default { export default {
components,
data: () => ({ data: () => ({
messages: [] messages: []
}), }),
@ -31,8 +32,7 @@ export default {
// Add the message to the list // Add the message to the list
this.messages.push(message) this.messages.push(message)
}) })
}, }
components
} }
</script> </script>

View File

@ -3,7 +3,7 @@
<h1>Nuxt Chat</h1> <h1>Nuxt Chat</h1>
<transition-group name="list" tag="ul"> <transition-group name="list" tag="ul">
<li v-for="(message, index) in messages" :key="index"> <li v-for="(message, index) in messages" :key="index">
<component :is="message.component" :data="message.data"></component> <component :is="message.component" :data="message.data"/>
</li> </li>
</transition-group> </transition-group>
</div> </div>
@ -21,10 +21,10 @@ const components = {
} }
export default { export default {
components,
data: () => ({ data: () => ({
messages messages
}), })
components
} }
</script> </script>
@ -60,4 +60,4 @@ ul li {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
</style> </style>

View File

@ -9,7 +9,12 @@
<script> <script>
export default { export default {
layout: ({ isMobile }) => isMobile ? 'mobile' : 'default', layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
props: ['error'] props: {
error: {
type: Object,
default: null
}
}
} }
</script> </script>

View File

@ -4,16 +4,16 @@
<div class="container"> <div class="container">
<h1 class="Header__Title">Nuxt i18n</h1> <h1 class="Header__Title">Nuxt i18n</h1>
<nav class="Header__Menu"> <nav class="Header__Menu">
<nuxt-link class="Header__Link" :to="$i18n.path('')" exact> <nuxt-link :to="$i18n.path('')" class="Header__Link" exact>
{{ $t('links.home') }} {{ $t('links.home') }}
</nuxt-link> </nuxt-link>
<nuxt-link class="Header__Link" :to="$i18n.path('about')" exact> <nuxt-link :to="$i18n.path('about')" class="Header__Link" exact>
{{ $t('links.about') }} {{ $t('links.about') }}
</nuxt-link> </nuxt-link>
<nuxt-link class="Header__Link" v-if="$i18n.locale === 'en'" :to="`/fr` + $route.fullPath" active-class="none" exact> <nuxt-link v-if="$i18n.locale === 'en'" :to="`/fr` + $route.fullPath" class="Header__Link" active-class="none" exact>
{{ $t('links.french') }} {{ $t('links.french') }}
</nuxt-link> </nuxt-link>
<nuxt-link class="Header__Link" v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" active-class="none" exact> <nuxt-link v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" class="Header__Link" active-class="none" exact>
{{ $t('links.english') }} {{ $t('links.english') }}
</nuxt-link> </nuxt-link>
</nav> </nav>

View File

@ -1,11 +1,14 @@
<template> <template>
<p v-html="data"></p> <p v-html="data"/>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: String data: {
type: String,
default: ''
}
} }
} }
</script> </script>

View File

@ -5,10 +5,10 @@
<span>{{ page }}/{{ totalPages }}</span> <span>{{ page }}/{{ totalPages }}</span>
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link> <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
<a v-else class="disabled">Next &gt;</a> <a v-else class="disabled">Next &gt;</a>
<transition mode="out-in" :name="transitionName"> <transition :name="transitionName" mode="out-in">
<ul :key="page"> <ul :key="page">
<li v-for="user in users" :key="user.id"> <li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" /> <img :src="user.avatar" class="avatar" >
<span>{{ user.first_name }} {{ user.last_name }}</span> <span>{{ user.first_name }} {{ user.last_name }}</span>
</li> </li>
</ul> </ul>
@ -21,6 +21,11 @@
import axios from 'axios' import axios from 'axios'
export default { export default {
data() {
return {
transitionName: this.getTransitionName(this.page)
}
},
watch: { watch: {
'$route.query.page': async function (page) { '$route.query.page': async function (page) {
this.$nuxt.$loading.start() this.$nuxt.$loading.start()
@ -41,11 +46,6 @@ export default {
users: data.data users: data.data
} }
}, },
data() {
return {
transitionName: this.getTransitionName(this.page)
}
},
methods: { methods: {
getTransitionName(newPage) { getTransitionName(newPage) {
return newPage < this.page ? 'slide-right' : 'slide-left' return newPage < this.page ? 'slide-right' : 'slide-left'

View File

@ -7,7 +7,7 @@
<a v-else class="disabled">Next &gt;</a> <a v-else class="disabled">Next &gt;</a>
<ul> <ul>
<li v-for="user in users" :key="user.id"> <li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" /> <img :src="user.avatar" class="avatar" >
<span>{{ user.first_name }} {{ user.last_name }}</span> <span>{{ user.first_name }} {{ user.last_name }}</span>
</li> </li>
</ul> </ul>

View File

@ -1,5 +1,5 @@
<template> <template>
<span v-if="false"></span> <span v-if="false"/>
</template> </template>
<script> <script>

View File

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<h1>About page</h1> <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> <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></twitter-head-card> <twitter-head-card/>
<p><nuxt-link to="/">Home page</nuxt-link></p> <p><nuxt-link to="/">Home page</nuxt-link></p>
</div> </div>
</template> </template>

View File

@ -6,15 +6,15 @@
<script> <script>
export default { export default {
computed: {
visits() {
return this.$store.state.visits.slice().reverse()
}
},
filters: { filters: {
hours(date) { hours(date) {
return date.split('T')[1].split('.')[0] return date.split('T')[1].split('.')[0]
} }
},
computed: {
visits() {
return this.$store.state.visits.slice().reverse()
}
} }
} }
</script> </script>

View File

@ -1,6 +1,6 @@
<template> <template>
<p class="p"> <p class="p">
<slot></slot> <slot/>
</p> </p>
</template> </template>

View File

@ -1,13 +1,16 @@
<template> <template>
<div class="main"> <div class="main">
<h1 class="title">{{ title }}</h1> <h1 class="title">{{ title }}</h1>
<slot></slot> <slot/>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['title'] title: {
type: String,
default: ''
}
} }
</script> </script>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<img :src="thumbnailUrl" /> <img :src="thumbnailUrl" >
<p><nuxt-link to="/">Home</nuxt-link> - About</p> <p><nuxt-link to="/">Home</nuxt-link> - About</p>
</div> </div>
</template> </template>

View File

@ -7,7 +7,7 @@
<a v-else class="disabled">Next &gt;</a> <a v-else class="disabled">Next &gt;</a>
<ul> <ul>
<li v-for="user in users" :key="user.id"> <li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" /> <img :src="user.avatar" class="avatar" >
<span>{{ user.first_name }} {{ user.last_name }}</span> <span>{{ user.first_name }} {{ user.last_name }}</span>
</li> </li>
</ul> </ul>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="child"> <div class="child">
<h1>Contact</h1> <h1>Contact</h1>
<div class="spacer" style="width: 100%; height: 3000px; background: grey"></div> <div class="spacer" style="width: 100%; height: 3000px; background: grey"/>
</div> </div>
</template> </template>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="child"> <div class="child">
<h1>Profile</h1> <h1>Profile</h1>
<div class="spacer" style="width: 100%; height: 3000px; background: grey"></div> <div class="spacer" style="width: 100%; height: 3000px; background: grey"/>
</div> </div>
</template> </template>

View File

@ -5,6 +5,6 @@
<p><nuxt-link to="/users">Lists of users</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">Long page</nuxt-link></p>
<p><nuxt-link to="/long#anchor">Long page #anchor</nuxt-link></p> <p><nuxt-link to="/long#anchor">Long page #anchor</nuxt-link></p>
<div class="spacer" style="width: 100%; height: 3000px; background: grey"></div> <div class="spacer" style="width: 100%; height: 3000px; background: grey"/>
</div> </div>
</template> </template>

View File

@ -7,7 +7,7 @@
<a v-else class="disabled">Next &gt;</a> <a v-else class="disabled">Next &gt;</a>
<ul> <ul>
<li v-for="user in users" :key="user.id"> <li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar" /> <img :src="user.avatar" class="avatar" >
<span>{{ user.first_name }} {{ user.last_name }}</span> <span>{{ user.first_name }} {{ user.last_name }}</span>
</li> </li>
</ul> </ul>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<img src="~static/nuxt-black.png" /> <img src="~static/nuxt-black.png" >
<h2>Thank you for testing nuxt.js</h2> <h2>Thank you for testing nuxt.js</h2>
<p>Loaded from the {{ name }}</p> <p>Loaded from the {{ name }}</p>
<p><nuxt-link to="/">Back home</nuxt-link></p> <p><nuxt-link to="/">Back home</nuxt-link></p>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<img src="nuxt.png" /> <img src="nuxt.png" >
<h2>Hello World.</h2> <h2>Hello World.</h2>
<p><nuxt-link to="/about">About</nuxt-link></p> <p><nuxt-link to="/about">About</nuxt-link></p>
</div> </div>

View File

@ -1,15 +1,20 @@
<template> <template>
<button class="wr-button" :style="{color: color, borderColor: color}" @click="handleClick" :class="{rounded: rounded}"><slot></slot>!</button> <button :style="{color: color, borderColor: color}" :class="{rounded: rounded}" class="wr-button" @click="handleClick"><slot/>!</button>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
rounded: Boolean, rounded: {
type: Boolean,
default: false
},
handleClick: { handleClick: {
type: Function,
default: () => () => null default: () => () => null
}, },
color: { color: {
type: String,
default: '#42b983' default: '#42b983'
} }
} }

View File

@ -1,54 +1,54 @@
<template> <template>
<v-app id="inspire" dark> <v-app id="inspire" dark>
<v-navigation-drawer <v-navigation-drawer
v-model="drawer"
clipped clipped
fixed fixed
v-model="drawer"
app app
> >
<v-list dense> <v-list dense>
<v-list-group v-for="item in items" :value="item.active" v-bind:key="item.title"> <v-list-group v-for="item in items" :value="item.active" :key="item.title">
<v-list-tile slot="item" @click=""> <v-list-tile slot="item">
<v-list-tile-action> <v-list-tile-action>
<v-icon>{{ item.action }}</v-icon> <v-icon>{{ item.action }}</v-icon>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title> <v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <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-action>
</v-list-tile> </v-list-tile>
<v-list-tile v-for="subItem in item.items" v-bind:key="subItem.title" @click=""> <v-list-tile v-for="subItem in item.items" :key="subItem.title">
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title> <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon> <v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action> </v-list-tile-action>
</v-list-tile> </v-list-tile>
</v-list-group> </v-list-group>
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
<v-toolbar app fixed clipped-left> <v-toolbar app fixed clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
<v-toolbar-title>Application</v-toolbar-title> <v-toolbar-title>Application</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-content> <v-content>
<v-container grid-list-md text-xs-center> <v-container grid-list-md text-xs-center>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs12> <v-flex xs12>
<v-card dark color="primary"> <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-card>
</v-flex> </v-flex>
</v-layout></v-container> </v-layout></v-container>
<v-container fluid fill-height> <v-container fluid fill-height>
<v-layout justify-center align-center> <v-layout justify-center align-center>
<v-tooltip right> <v-tooltip right>
<v-btn icon large :href="source" target="_blank" slot="activator"> <v-btn slot="activator" :href="source" icon large target="_blank">
<v-icon large>code</v-icon> <v-icon large>code</v-icon>
</v-btn> </v-btn>
<span>Source</span> <span>Source</span>
@ -65,14 +65,20 @@
<script> <script>
export default { export default {
name: 'layout', name: 'Layout',
props: {
items: {
type: Array,
default: () => []
},
source: {
type: String,
default: ''
}
},
data: () => ({ data: () => ({
drawer: null drawer: null
}), })
props: {
items: Array,
source: String
}
} }
</script> </script>

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="VueToNuxtLogo"> <div class="VueToNuxtLogo">
<div class="Triangle Triangle--two"></div> <div class="Triangle Triangle--two"/>
<div class="Triangle Triangle--one"></div> <div class="Triangle Triangle--one"/>
<div class="Triangle Triangle--three"></div> <div class="Triangle Triangle--three"/>
<div class="Triangle Triangle--four"></div> <div class="Triangle Triangle--four"/>
</div> </div>
</template> </template>

View File

@ -1,69 +1,70 @@
<template> <template>
<v-app> <v-app>
<v-container fluid> <v-container fluid>
<div class="main"> <div class="main">
<h1>Welcome to STORYBOOK</h1> <h1>Welcome to STORYBOOK</h1>
<p> <p>
This is a UI component dev environment for your app. This is a UI component dev environment for your app.
</p> </p>
<p>The repo for this project exists here <p>The repo for this project exists here
<a class="link" <a
href="https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate" class="link"
target="_blank" href="https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate"
rel="noopener noreferrer"> target="_blank"
vuetify-storyboard-boilerplate rel="noopener noreferrer">
</a> vuetify-storyboard-boilerplate
</p> </a>
</p>
<p> <p>
We've added some basic stories inside the We've added some basic stories inside the
<code class="code">src/stories</code> <code class="code">src/stories</code>
directory. directory.
A story is a single state of one or more UI components. You can have as many stories as you want. 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.) (Basically a story is like a visual test case.)
</p> </p>
<p> <p>
See these sample See these sample
<a class="link" @click.prevent="showApp" role="button" tabIndex="0">stories</a> <a class="link" role="button" tabIndex="0" @click.prevent="showApp">stories</a>
for a component called for a component called
<code class="code">Button</code> . <code class="code">Button</code> .
</p> </p>
<p> <p>
Just like that, you can add your own components as stories. Just like that, you can add your own components as stories.
You can also edit those components and see changes right away. You can also edit those components and see changes right away.
(Try editing the (Try editing the
<code class="code">Button</code> component located at <code class="code">Button</code> component located at
<code class="code">src/stories/Button.js</code>.) <code class="code">src/stories/Button.js</code>.)
</p> </p>
<p> <p>
This is just one thing you can do with Storybook. This is just one thing you can do with Storybook.
Have a look at the Have a look at the
<a class="link" href="https://github.com/storybooks/storybook" target="_blank" rel="noopener noreferrer"> <a class="link" href="https://github.com/storybooks/storybook" target="_blank" rel="noopener noreferrer">
Storybook Storybook
</a> </a>
repo for more information. repo for more information.
</p> </p>
<p class="note"> <p class="note">
<b>NOTE:</b> <b>NOTE:</b>
Have a look at the 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. to add webpack loaders and plugins you are using in this project.
</p> </p>
</div> </div>
</v-container> </v-container>
</v-app> </v-app>
</template> </template>
<script> <script>
export default { export default {
name: 'welcome', name: 'Welcome',
props: { props: {
showApp: { showApp: {

View File

@ -9,28 +9,28 @@
> >
<v-list> <v-list>
<v-list-tile <v-list-tile
router v-for="(item, i) in items"
:to="item.to" :to="item.to"
:key="i" :key="i"
v-for="(item, i) in items" router
exact exact
> >
<v-list-tile-action> <v-list-tile-action>
<v-icon v-html="item.icon"></v-icon> <v-icon v-html="item.icon"/>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title> <v-list-tile-title v-text="item.title"/>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
<v-toolbar fixed app :clipped-left="clipped"> <v-toolbar :clipped-left="clipped" fixed app>
<v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon> <v-toolbar-side-icon @click="drawer = !drawer"/>
<v-btn <v-btn
icon icon
@click.stop="miniVariant = !miniVariant" @click.stop="miniVariant = !miniVariant"
> >
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon> <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"/>
</v-btn> </v-btn>
<v-btn <v-btn
icon icon
@ -44,8 +44,8 @@
> >
<v-icon>remove</v-icon> <v-icon>remove</v-icon>
</v-btn> </v-btn>
<v-toolbar-title v-text="title"></v-toolbar-title> <v-toolbar-title v-text="title"/>
<v-spacer></v-spacer> <v-spacer/>
<v-btn <v-btn
icon icon
@click.stop="rightDrawer = !rightDrawer" @click.stop="rightDrawer = !rightDrawer"
@ -59,9 +59,9 @@
</v-container> </v-container>
</v-content> </v-content>
<v-navigation-drawer <v-navigation-drawer
temporary
:right="right" :right="right"
v-model="rightDrawer" v-model="rightDrawer"
temporary
fixed fixed
> >
<v-list> <v-list>
@ -80,21 +80,21 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
clipped: false, clipped: false,
drawer: true, drawer: true,
fixed: false, fixed: false,
items: [ items: [
{ icon: 'apps', title: 'Welcome', to: '/' }, { icon: 'apps', title: 'Welcome', to: '/' },
{ icon: 'bubble_chart', title: 'Inspire', to: '/inspire' } { icon: 'bubble_chart', title: 'Inspire', to: '/inspire' }
], ],
miniVariant: false, miniVariant: false,
right: true, right: true,
rightDrawer: false, rightDrawer: false,
title: 'Vuetify.js' title: 'Vuetify.js'
}
} }
} }
}
</script> </script>

View File

@ -22,7 +22,7 @@
<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-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <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-actions>
</v-card> </v-card>

View File

@ -4,7 +4,7 @@
<p class="font-bold">Be Warned!</p> <p class="font-bold">Be Warned!</p>
<p>This page has been {{ mode }}-side rendered!</p> <p>This page has been {{ mode }}-side rendered!</p>
</div> </div>
<button @click="$router.push('/')" 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"> <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('/')">
Back to home Back to home
</button> </button>
</div> </div>

View File

@ -12,6 +12,6 @@
<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">#winter</span>
</div> </div>
</div> </div>
<button @click="$router.push('/about')" class="bg-blue mt-4 hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">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> </div>
</template> </template>

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="ba b--black-20 mw5 ma2"> <div class="ba b--black-20 mw5 ma2">
<img :src="'https://robots.johnlindquist.com/' + person.first_name + '_' + person.last_name" /> <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="flex flex-column items-center pa2 b--black-20">
<div class="f4">{{person.first_name}} {{person.last_name}}</div> <div class="f4">{{ person.first_name }} {{ person.last_name }}</div>
<button @click="select(person.id)" class="w-100 bg-blue dim mv2 pv2 bn pointer">Select</button> <button class="w-100 bg-blue dim mv2 pv2 bn pointer" @click="select(person.id)">Select</button>
</div> </div>
</div> </div>
</template> </template>

View File

@ -2,12 +2,12 @@
<section class="pa4"> <section class="pa4">
<div class="bg-white-90 pa4"> <div class="bg-white-90 pa4">
<div class="f1">Nuxt TypeScript Starter</div> <div class="f1">Nuxt TypeScript Starter</div>
<div class="f3">Selected Person: {{selectedPerson.first_name}} {{selectedPerson.last_name}}</div> <div class="f3">Selected Person: {{ selectedPerson.first_name }} {{ selectedPerson.last_name }}</div>
{{selected}} {{ selected }}
</div> </div>
<div class="flex flex-wrap ph2 justify-between bg-white-80"> <div class="flex flex-wrap ph2 justify-between bg-white-80">
<div v-for="person in people" :key="person.id"> <div v-for="person in people" :key="person.id">
<Card :person="person"></Card> <Card :person="person"/>
</div> </div>
</div> </div>
</section> </section>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="uk-card uk-card-body"> <div class="uk-card uk-card-body">
<p>Hi from {{ name }}</p> <p>Hi from {{ name }}</p>
<span class="uk-margin-small-right" uk-icon="icon: check"></span> <span class="uk-margin-small-right" uk-icon="icon: check"/>
<a href="#" uk-icon="icon: heart"></a> <a href="#" uk-icon="icon: heart"/>
<hr class="uk-divider-icon"> <hr class="uk-divider-icon">
<nuxt-link to="/">Home page</nuxt-link> <nuxt-link to="/">Home page</nuxt-link>
</div> </div>

View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<input v-model="msg"> <input v-model="msg">
<p>msg: {{msg}}</p> <p>msg: {{ msg }}</p>
<p>env: {{env}}</p> <p>env: {{ env }}</p>
<p>computed msg: {{computedMsg}}</p> <p>computed msg: {{ computedMsg }}</p>
<button @click="greet">Greet</button> <button @click="greet">Greet</button>
<p><nuxt-link to="/about">About page</nuxt-link></p> <p><nuxt-link to="/about">About page</nuxt-link></p>
</div> </div>

View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<input v-model="msg"> <input v-model="msg">
<p>msg: {{msg}}</p> <p>msg: {{ msg }}</p>
<p>env: {{env}}</p> <p>env: {{ env }}</p>
<p>computed msg: {{computedMsg}}</p> <p>computed msg: {{ computedMsg }}</p>
<button @click="greet">Greet</button> <button @click="greet">Greet</button>
<p><nuxt-link to="/about">About page</nuxt-link></p> <p><nuxt-link to="/about">About page</nuxt-link></p>
</div> </div>

View File

@ -1,5 +1,5 @@
<template> <template>
<Child :env="env" ></Child> <Child :env="env" />
</template> </template>
<script> <script>

View File

@ -1,18 +1,17 @@
<template> <template>
<div> <div>
<p> <p/><h3>Index Module</h3>
<h3>Index Module</h3> <button @click="increment">{{ counter }}</button>
<button @click="increment">{{ counter }}</button> <br>
<br> <nuxt-link to="/about">About</nuxt-link>
<nuxt-link to="/about">About</nuxt-link> <br>
<br> <br>
<br> <h3>Todo Module</h3>
<h3>Todo Module</h3> <nuxt-link to="/todos">Todos</nuxt-link>
<nuxt-link to="/todos">Todos</nuxt-link> <br>
<br> <br>
<br> <h3>Nested Modules</h3>
<h3>Nested Modules</h3> <nuxt-link to="/website">Website</nuxt-link>
<nuxt-link to="/website">Website</nuxt-link>
</p> </p>
</div> </div>
</template> </template>

View File

@ -3,7 +3,7 @@
<h2>Todos</h2> <h2>Todos</h2>
<ul> <ul>
<li v-for="(todo, index) in todos" :key="index"> <li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" :checked="todo.done" @change="toggle(todo)"> <input :checked="todo.done" type="checkbox" @change="toggle(todo)">
<span :class="{ done: todo.done }">{{ todo.text }}</span> <span :class="{ done: todo.done }">{{ todo.text }}</span>
</li> </li>
<li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li> <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>

View File

@ -3,13 +3,13 @@
<h2>Articles</h2> <h2>Articles</h2>
<ul> <ul>
<li v-for="(article, index) in articles" :key="index"> <li v-for="(article, index) in articles" :key="index">
<span>{{article}}</span> <span>{{ article }}</span>
</li> </li>
</ul> </ul>
<h2>Comments <small>(nested under articles)</small></h2> <h2>Comments <small>(nested under articles)</small></h2>
<ul> <ul>
<li v-for="(comment, index) in comments" :key="index"> <li v-for="(comment, index) in comments" :key="index">
<span>{{comment}}</span> <span>{{ comment }}</span>
</li> </li>
</ul> </ul>
<nuxt-link to="/">Home</nuxt-link> <nuxt-link to="/">Home</nuxt-link>

View File

@ -8,9 +8,7 @@ module.exports = {
parser: 'babel-eslint' parser: 'babel-eslint'
}, },
extends: [ extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 'plugin:vue/recommended'
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/strongly-recommended'
], ],
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: [

View File

@ -17,22 +17,22 @@
<div class="links"> <div class="links">
<a <a
:class="needWorkerSetup ? 'hidden' : 'visible'" :class="needWorkerSetup ? 'hidden' : 'visible'"
@click="test" class="button button--green"
class="button button--green">Test Worker</a> @click="test">Test Worker</a>
<a <a
:class="needWorkerSetup ? 'hidden' : 'visible'" :class="needWorkerSetup ? 'hidden' : 'visible'"
@click="long(4000)" class="button button--green"
class="button button--green">Execute long running Worker</a> @click="long(4000)">Execute long running Worker</a>
<a <a
:class="needWorkerSetup || !longRunningWorkers.length ? 'hidden' : 'visible'" :class="needWorkerSetup || !longRunningWorkers.length ? 'hidden' : 'visible'"
@click="freeWorker" class="button button--green"
class="button button--green">Free long running Worker</a> @click="freeWorker">Free long running Worker</a>
<a <a
@click="removeWorker" class="button button--grey"
class="button button--grey">Remove Web Worker</a> @click="removeWorker">Remove Web Worker</a>
<a <a
@click="createWorkers" class="button button--grey"
class="button button--grey">Create more Workers</a> @click="createWorkers">Create more Workers</a>
</div> </div>
</div> </div>
</section> </section>
@ -45,11 +45,6 @@ export default {
components: { components: {
AppLogo AppLogo
}, },
computed: {
needWorkerSetup () {
return this.workers.length === 0 && this.longRunningWorkers.length === 0
}
},
data () { data () {
return { return {
notification: '', notification: '',
@ -59,6 +54,11 @@ export default {
longIndex: 0 longIndex: 0
} }
}, },
computed: {
needWorkerSetup () {
return this.workers.length === 0 && this.longRunningWorkers.length === 0
}
},
watch: { watch: {
workers (workers) { workers (workers) {
if (workers.length === 0) this.notification = 'Zero free Web Workers - click "Create more Workers"' if (workers.length === 0) this.notification = 'Zero free Web Workers - click "Create more Workers"'

View File

@ -6,6 +6,9 @@
<script> <script>
export default { export default {
props: ['author'] author: {
type: String,
default: ''
}
} }
</script> </script>

View File

@ -22,4 +22,3 @@
@import "~bulma"; @import "~bulma";
@import "~buefy/src/scss/buefy"; @import "~buefy/src/scss/buefy";
</style> </style>

View File

@ -4,7 +4,7 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Key</th><th>Value</th><th></th> <th>Key</th><th>Value</th><th/>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -17,8 +17,8 @@
</table> </table>
<h2>Add a new cookie</h2> <h2>Add a new cookie</h2>
<form @submit.prevent="addCookie"> <form @submit.prevent="addCookie">
<input type="text" v-model="newCookie.key" placeholder="Key" class="key"/>: <input v-model="newCookie.key" type="text" placeholder="Key" class="key">:
<input type="text" v-model="newCookie.value" placeholder="Value" class="value"/> <input v-model="newCookie.value" type="text" placeholder="Value" class="value">
<button type="submit">Add</button> <button type="submit">Add</button>
</form> </form>
</div> </div>

View File

@ -4,7 +4,7 @@
<span>Element Example</span> <span>Element Example</span>
</div> </div>
<div> <div>
<nuxt></nuxt> <nuxt/>
</div> </div>
</el-card> </el-card>
</template> </template>

View File

@ -1,29 +1,29 @@
<template> <template>
<div class="elm-demo"> <div class="elm-demo">
<el-form :model="account" :rules="formRules" ref="elm-demo" label-width="100px"> <el-form ref="elm-demo" :model="account" :rules="formRules" label-width="100px">
<el-row type="flex" justify="flex-start"> <el-row type="flex" justify="flex-start">
<el-col :xs="24" :sm="10"> <el-col :xs="24" :sm="10">
<el-form-item label="Account Name" prop="name" required> <el-form-item label="Account Name" prop="name" required>
<el-input v-model="account.name"></el-input> <el-input v-model="account.name"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" justify="flex-start"> <el-row type="flex" justify="flex-start">
<el-col :xs="24" :sm="10"> <el-col :xs="24" :sm="10">
<el-form-item label="Date" prop="date" required> <el-form-item label="Date" prop="date" required>
<el-date-picker v-model="account.date" style="width: 100%;"></el-date-picker> <el-date-picker v-model="account.date" style="width: 100%;"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="{span: 3, offset: 2}"> <el-col :xs="24" :sm="{span: 3, offset: 2}">
<el-form-item label="Subscribe" prop="subscribe"> <el-form-item label="Subscribe" prop="subscribe">
<el-switch on-text="" off-text="" v-model="account.subscribe"></el-switch> <el-switch v-model="account.subscribe" on-text="" off-text=""/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" justify="flex-start"> <el-row type="flex" justify="flex-start">
<el-col :xs="24" :sm="10"> <el-col :xs="24" :sm="10">
<el-form-item label="Rate" prop="rate"> <el-form-item label="Rate" prop="rate">
<el-rate v-model="account.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate> <el-rate v-model="account.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="{span: 10, offset: 2}"> <el-col :xs="24" :sm="{span: 10, offset: 2}">

View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
root: true, root: true,
parser: 'babel-eslint',
parserOptions: { parserOptions: {
parser: 'babel-eslint',
sourceType: 'module' sourceType: 'module'
}, },
env: { env: {
@ -9,10 +9,13 @@ module.exports = {
node: true, node: true,
mocha: true mocha: true
}, },
extends: 'standard', extends: [
'standard',
'plugin:vue/recommended'
],
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: [
'html' 'vue'
], ],
// add your custom rules here // add your custom rules here
rules: { rules: {
@ -24,13 +27,16 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// do not allow console.logs etc... // do not allow console.logs etc...
'no-console': 2, 'no-console': 2,
'space-before-function-paren': [ 'space-before-function-paren': [2, {
2, anonymous: 'always',
{ named: 'never'
anonymous: 'always', }],
named: 'never' 'vue/no-parsing-error': [2, {
} 'x-invalid-end-tag': false
], }],
"vue/max-attributes-per-line": [2, {
"singleline": 5,
}]
}, },
globals: {} globals: {}
} }

View File

@ -1,43 +1,43 @@
<template> <template>
<div> <div>
<mu-appbar title="Nuxt.js"> <mu-appbar title="Nuxt.js">
<mu-icon-button icon="menu" slot="left" @click="toggle()" /> <mu-icon-button slot="left" icon="menu" @click="toggle()" />
<mu-icon-menu icon="expand_more" slot="right"> <mu-icon-menu slot="right" icon="expand_more">
<mu-menu-item value="1" title="One" /> <mu-menu-item value="1" title="One" />
<mu-menu-item value="2" title="Two" /> <mu-menu-item value="2" title="Two" />
<mu-menu-item value="3" title="Three" /> <mu-menu-item value="3" title="Three" />
</mu-icon-menu> </mu-icon-menu>
</mu-appbar> </mu-appbar>
<mu-drawer :open="open" @close="toggle()" :docked=false> <mu-drawer :open="open" :docked="false" @close="toggle()">
<mu-list> <mu-list>
<mu-list-item title="Menu Item 1" /> <mu-list-item title="Menu Item 1" />
<mu-list-item title="Menu Item 2" /> <mu-list-item title="Menu Item 2" />
<mu-list-item title="Menu Item 3" /> <mu-list-item title="Menu Item 3" />
</mu-list> </mu-list>
</mu-drawer> </mu-drawer>
<div class="content"> <div class="content">
<mu-raised-button label="Primary" class="demo-raised-button" primary/> <mu-raised-button label="Primary" class="demo-raised-button" primary/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
open: false open: false
} }
}, },
methods: { methods: {
toggle(flag) { toggle(flag) {
this.open = !this.open this.open = !this.open
} }
} }
} }
</script> </script>
<style> <style>
.content { .content {
margin: 10px margin: 10px
} }
</style> </style>

View File

@ -4,7 +4,7 @@
<p class="font-bold">Be Warned!</p> <p class="font-bold">Be Warned!</p>
<p>This page has been {{ mode }}-side rendered!</p> <p>This page has been {{ mode }}-side rendered!</p>
</div> </div>
<button @click="$router.push('/')" 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"> <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('/')">
Back to home Back to home
</button> </button>
</div> </div>

View File

@ -12,6 +12,6 @@
<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">#winter</span>
</div> </div>
</div> </div>
<button @click="$router.push('/about')" class="bg-blue mt-4 hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">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> </div>
</template> </template>

View File

@ -3,13 +3,13 @@
<ul class="pages"> <ul class="pages">
<li class="chat page"> <li class="chat page">
<div class="chatArea"> <div class="chatArea">
<ul class="messages" ref="messages"> <ul ref="messages" class="messages">
<li class="message" v-for="(message, index) in messages" :key="index"> <li v-for="(message, index) in messages" :key="index" class="message">
<i :title="message.date">{{ message.date.split('T')[1].slice(0, -2) }}</i>: {{ message.text }} <i :title="message.date">{{ message.date.split('T')[1].slice(0, -2) }}</i>: {{ message.text }}
</li> </li>
</ul> </ul>
</div> </div>
<input class="inputMessage" type="text" v-model="message" @keyup.enter="sendMessage" placeholder="Type here..." /> <input v-model="message" class="inputMessage" type="text" placeholder="Type here..." @keyup.enter="sendMessage" >
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -6,26 +6,26 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { name: 'world', className: 'red' } return { name: 'world', className: 'red' }
}, },
methods: { methods: {
changeColor() { changeColor() {
this.className = this.className === 'red' ? 'blue' : 'green' this.className = this.className === 'red' ? 'blue' : 'green'
}
} }
} }
}
</script> </script>
<style> <style>
.red { .red {
color: red; color: red;
} }
.blue { .blue {
color: blue; color: blue;
} }
.green { .green {
color: green; color: green;
} }
</style> </style>

View File

@ -39,7 +39,7 @@
</md-list> </md-list>
</md-drawer> </md-drawer>
<md-drawer class="md-right" :md-active.sync="showSidepanel"> <md-drawer :md-active.sync="showSidepanel" class="md-right">
<md-toolbar class="md-transparent" md-elevation="0"> <md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">Favorites</span> <span class="md-title">Favorites</span>
</md-toolbar> </md-toolbar>

View File

@ -4,7 +4,7 @@
<v-toolbar-side-icon @click.native.stop="drawer = !drawer" /> <v-toolbar-side-icon @click.native.stop="drawer = !drawer" />
<v-toolbar-title>Toolbar</v-toolbar-title> <v-toolbar-title>Toolbar</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-navigation-drawer left fixed app v-model="drawer"> <v-navigation-drawer v-model="drawer" left fixed app>
<v-list> <v-list>
<v-list-tile router nuxt href="/"> <v-list-tile router nuxt href="/">
<v-list-tile-title>Home</v-list-tile-title> <v-list-tile-title>Home</v-list-tile-title>

View File

@ -1,6 +1,6 @@
<template> <template>
<v-carousel> <v-carousel>
<v-carousel-item v-for="(src, i) in images" v-bind:src="src" :key="i"></v-carousel-item> <v-carousel-item v-for="(src, i) in images" :src="src" :key="i"/>
</v-carousel> </v-carousel>
</template> </template>
@ -15,4 +15,4 @@ export default {
] ]
}) })
} }
</script> </script>

View File

@ -5,4 +5,4 @@
<v-btn secondary>Secondary button</v-btn> <v-btn secondary>Secondary button</v-btn>
<v-btn success>Success button</v-btn> <v-btn success>Success button</v-btn>
</div> </div>
</template> </template>

View File

@ -14,6 +14,6 @@
</vk-dropdown> </vk-dropdown>
</div> </div>
<hr class="uk-divider-icon"> <hr class="uk-divider-icon">
<vk-icon icon="heart"></vk-icon> <vk-icon icon="heart"/>
</vk-card> </vk-card>
</template> </template>

View File

@ -1,9 +1,9 @@
<template> <template>
<nuxt></nuxt> <nuxt/>
</template> </template>
<style> <style>
body { body {
background-color: #fbf9fe; background-color: #fbf9fe;
} }
</style> </style>

View File

@ -1,12 +1,11 @@
<template> <template>
<div> <div>
<group title="vux demo"> <group title="vux demo">
<cell title="cell" value="click me" is-link @click.native="alert"></cell> <cell title="cell" value="click me" is-link @click.native="alert"/>
</group> </group>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
head() { head() {
@ -20,4 +19,4 @@ export default {
} }
} }
} }
</script> </script>

View File

@ -142,7 +142,6 @@
"eslint": "^4.19.1", "eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0", "eslint-config-standard": "^11.0.0",
"eslint-config-standard-jsx": "^5.0.0", "eslint-config-standard-jsx": "^5.0.0",
"eslint-plugin-html": "^4.0.2",
"eslint-plugin-import": "^2.12.0", "eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.17.0", "eslint-plugin-jest": "^21.17.0",
"eslint-plugin-node": "^6.0.0", "eslint-plugin-node": "^6.0.0",

View File

@ -1,5 +1,5 @@
<template> <template>
<div></div> <div/>
</template> </template>
<style> <style>

View File

@ -1,5 +1,3 @@
<template></template>
<script> <script>
export default { export default {
middleware: 'redirect', middleware: 'redirect',

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<h1>I am the {{ name }}</h1> <h1>I am the {{ name }}</h1>
<nuxt-child></nuxt-child> <nuxt-child/>
</div> </div>
</template> </template>

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<h4>_slug: <i data-date-child-slug>{{ date }}</i></h4> <h4>_slug: <i data-date-child-slug>{{ date }}</i></h4>
<input ref="search" data-test-search-input type="text" v-model="q" @input="update"/> <input ref="search" v-model="q" data-test-search-input type="text" @input="update">
<ul><li data-test-search-result v-for="s in searchResults" :key="s">{{ s }}</li></ul> <ul><li v-for="s in searchResults" :key="s" data-test-search-result>{{ s }}</li></ul>
</div> </div>
</template> </template>
@ -24,6 +24,11 @@ async function search(q) {
} }
export default { export default {
data() {
return {
q: this.$route.query.q || ''
}
},
watch: { watch: {
'$route.query.q': async function (q) { '$route.query.q': async function (q) {
this.searchResults = await search(q) this.searchResults = await search(q)
@ -36,11 +41,6 @@ export default {
date: Date.now() date: Date.now()
} }
}, },
data() {
return {
q: this.$route.query.q || ''
}
},
mounted() { mounted() {
this.$refs.search.selectionStart = this.$refs.search.selectionEnd = this.$refs.search.value.length this.$refs.search.selectionStart = this.$refs.search.selectionEnd = this.$refs.search.value.length
this.$refs.search.focus() this.$refs.search.focus()

View File

@ -1,3 +1,3 @@
<template> <template>
<h1>pages/_key/_id.vue</h1> <h1>pages/_key/_id.vue</h1>
</template> </template>

View File

@ -1,3 +1,3 @@
<template> <template>
<h1>pages/_slug.vue</h1> <h1>pages/_slug.vue</h1>
</template> </template>

View File

@ -1,3 +1,3 @@
<template> <template>
<h1>pages/test/_.vue</h1> <h1>pages/test/_.vue</h1>
</template> </template>

View File

@ -1,3 +1,3 @@
<template> <template>
<h1>pages/test/index.vue</h1> <h1>pages/test/index.vue</h1>
</template> </template>

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<h1>I'm RED</h1> <h1>I'm RED</h1>
</div> </div>
</template> </template>
<style scoped> <style scoped>

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<h1>Module Layouts</h1> <h1>Module Layouts</h1>
<nuxt /> <nuxt />
</div> </div>
</template> </template>

View File

@ -4,4 +4,4 @@
<br> <br>
<nuxt/> <nuxt/>
</div> </div>
</template> </template>

View File

@ -1,7 +1,7 @@
<template> <template>
<foobar> <foobar>
{{id}} {{ id }}
</foobar> </foobar>
</template> </template>
<script> <script>
@ -14,4 +14,4 @@ export default {
} }
} }
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<async-test/> <async-test/>
</div> </div>
</template> </template>
<script> <script>
@ -12,4 +12,4 @@ export default {
AsyncTest AsyncTest
} }
} }
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<foobar>{{id}}</foobar> <foobar>{{ id }}</foobar>
</template> </template>
<script> <script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<test/> <test/>
</div> </div>
</template> </template>
<script> <script>
@ -12,4 +12,4 @@ export default {
test test
} }
} }
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<foobar>{{id}}</foobar> <foobar>{{ id }}</foobar>
</template> </template>
<script> <script>

View File

@ -1,5 +1,5 @@
<template> <template>
<foobar>{{$store.__id}}</foobar> <foobar>{{ $store.__id }}</foobar>
</template> </template>
<script> <script>

View File

@ -1,5 +1,5 @@
<template> <template>
<foobar> <foobar>
{{$store.state[$route.query.onServerInit === '1' ? 'id2': 'id']}} {{ $store.state[$route.query.onServerInit === '1' ? 'id2': 'id'] }}
</foobar> </foobar>
</template> </template>

View File

@ -1,5 +1,5 @@
<template lang="html"> <template lang="html">
<div class="loading-page" v-if="loading"> <div v-if="loading" class="loading-page">
<p>Loading...</p> <p>Loading...</p>
</div> </div>
</template> </template>

View File

@ -17,4 +17,4 @@
body { body {
font-family: 'Roboto'; font-family: 'Roboto';
} }
</style> </style>

View File

@ -18,4 +18,3 @@ body {
font-family: 'Roboto'; font-family: 'Roboto';
} }
</style> </style>

View File

@ -9,4 +9,3 @@ export default {
layout: 'desktop/default' layout: 'desktop/default'
} }
</script> </script>

View File

@ -9,4 +9,3 @@ export default {
layout: 'mobile/default' layout: 'mobile/default'
} }
</script> </script>

View File

@ -2345,7 +2345,7 @@ domain-browser@^1.1.1:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
domelementtype@1, domelementtype@^1.3.0: domelementtype@1:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
@ -2365,12 +2365,6 @@ domhandler@2.1:
dependencies: dependencies:
domelementtype "1" domelementtype "1"
domhandler@^2.3.0:
version "2.4.2"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
dependencies:
domelementtype "1"
domutils@1.1: domutils@1.1:
version "1.1.6" version "1.1.6"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@ -2384,13 +2378,6 @@ domutils@1.5.1:
dom-serializer "0" dom-serializer "0"
domelementtype "1" domelementtype "1"
domutils@^1.5.1:
version "1.7.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
dependencies:
dom-serializer "0"
domelementtype "1"
dot-prop@^4.1.1: dot-prop@^4.1.1:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@ -2477,7 +2464,7 @@ enhanced-resolve@^4.1.0:
memory-fs "^0.4.0" memory-fs "^0.4.0"
tapable "^1.0.0" tapable "^1.0.0"
entities@^1.1.1, entities@~1.1.1: entities@~1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@ -2591,12 +2578,6 @@ eslint-module-utils@^2.2.0:
debug "^2.6.8" debug "^2.6.8"
pkg-dir "^1.0.0" pkg-dir "^1.0.0"
eslint-plugin-html@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-4.0.3.tgz#97d52dcf9e22724505d02719fbd02754013c8a17"
dependencies:
htmlparser2 "^3.8.2"
eslint-plugin-import@^2.12.0: eslint-plugin-import@^2.12.0:
version "2.12.0" version "2.12.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz#dad31781292d6664b25317fd049d2e2b2f02205d" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz#dad31781292d6664b25317fd049d2e2b2f02205d"
@ -3436,17 +3417,6 @@ html-webpack-plugin@^3.2.0:
toposort "^1.0.0" toposort "^1.0.0"
util.promisify "1.0.0" util.promisify "1.0.0"
htmlparser2@^3.8.2:
version "3.9.2"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
dependencies:
domelementtype "^1.3.0"
domhandler "^2.3.0"
domutils "^1.5.1"
entities "^1.1.1"
inherits "^2.0.1"
readable-stream "^2.0.2"
htmlparser2@~3.3.0: htmlparser2@~3.3.0:
version "3.3.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"