mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-03 10:57:18 +00:00
chore: add styled-vue example (#4712)
This commit is contained in:
parent
ecf76d91f1
commit
38e2ddf7fe
3
examples/styled-vue/README.md
Normal file
3
examples/styled-vue/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# styled-vue Example
|
||||||
|
|
||||||
|
See https://github.com/egoist/styled-vue
|
5
examples/styled-vue/nuxt.config.js
Normal file
5
examples/styled-vue/nuxt.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
modules: [
|
||||||
|
'styled-vue/nuxt'
|
||||||
|
]
|
||||||
|
}
|
15
examples/styled-vue/package.json
Normal file
15
examples/styled-vue/package.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"name": "example-styled-vue",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"nuxt-edge": "latest"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "nuxt",
|
||||||
|
"build": "nuxt build",
|
||||||
|
"start": "nuxt start"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"styled-vue": "^0.1.3"
|
||||||
|
}
|
||||||
|
}
|
33
examples/styled-vue/pages/index.vue
Normal file
33
examples/styled-vue/pages/index.vue
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>styled-vue</h1>
|
||||||
|
<a href="https://github.com/egoist/styled-vue" class="github">Check it out on GitHub.</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { css } from 'styled-vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
style: css`
|
||||||
|
h1 {
|
||||||
|
color: red;
|
||||||
|
font-size: ${vm => vm.fontSize}px;
|
||||||
|
}
|
||||||
|
.github {
|
||||||
|
color: blue;
|
||||||
|
animation: blink 1s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes blink {
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fontSize: 60
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in New Issue
Block a user