Skip to content

Commit 9beebd2

Browse files
daggerokdaggerok
committed
init and implement 09-nuxt-server-side-rendering
1 parent b169397 commit 9beebd2

File tree

22 files changed

+480
-1
lines changed

22 files changed

+480
-1
lines changed

‎.editorconfig

+3
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,6 @@ indent_size = 2
77
end_of_line = lf
88
insert_final_newline = true
99
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@ dist/
1010
*.njsproj
1111
*.sln
1212
*.lock
13+
.yarnclean
14+
15+
# Nuxt build
16+
.nuxt

‎.travis.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ before_script:
2525
script:
2626
- export ROOT=$PWD
2727
- >
28-
for path in 08-vuex-map-getters-and-map-actions \
28+
for path in 09-nuxt-server-side-rendering \
29+
08-vuex-map-getters-and-map-actions \
2930
07-vue-material \
3031
06-materialize-css \
3132
05-vuex-contact-list \

‎09-nuxt-server-side-rendering/.eslintrc.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
root: true,
3+
parser: 'babel-eslint',
4+
env: {
5+
browser: true,
6+
node: true
7+
},
8+
extends: 'standard',
9+
// required to lint *.vue files
10+
plugins: [
11+
'html'
12+
],
13+
// add your custom rules here
14+
rules: {
15+
'semi': 0,
16+
'comma-dangle': 0,
17+
'space-before-function-paren': 0,
18+
'yoda': 0,
19+
},
20+
globals: {}
21+
};

‎09-nuxt-server-side-rendering/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# 09-nuxt-server-side-rendering
2+
3+
## build run and deploy
4+
5+
``` bash
6+
yarn dev
7+
yarn lint
8+
yarn build
9+
yarn start
10+
yarn genetrate
11+
yarn predeploy
12+
yarn deploy
13+
```
14+
15+
**auto generated part**:
16+
17+
> Nuxt.js server-side rendenring with Vue.js
18+
19+
## Build Setup
20+
21+
``` bash
22+
# install dependencies
23+
$ npm install # Or yarn install
24+
25+
# serve with hot reload at localhost:3000
26+
$ npm run dev
27+
28+
# build for production and launch server
29+
$ npm run build
30+
$ npm start
31+
32+
# generate static project
33+
$ npm run generate
34+
```
35+
36+
For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).

‎09-nuxt-server-side-rendering/assets/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# ASSETS
2+
3+
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4+
5+
More information about the usage of this directory in the documentation:
6+
https://nuxtjs.org/guide/assets#webpacked
7+
8+
**This directory is not required, you can delete it if you don't want to use it.**

‎09-nuxt-server-side-rendering/components/Links.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="links">
3+
<nuxt-link to="/">
4+
<div class="button--grey">Home</div>
5+
</nuxt-link>
6+
<nuxt-link to="/services">
7+
<div class="button--grey">Services</div>
8+
</nuxt-link>
9+
<nuxt-link to="/about">
10+
<div class="button--grey">About</div>
11+
</nuxt-link>
12+
</div>
13+
</template>
14+
15+
<script>
16+
export default {
17+
name: 'links',
18+
};
19+
</script>
20+
21+
<style scoped="">
22+
ul {
23+
display: inline;
24+
list-style-type: none;
25+
margin: 0;
26+
padding: 0;
27+
min-width: 60%;
28+
}
29+
</style>

‎09-nuxt-server-side-rendering/components/Logo.vue

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="VueToNuxtLogo">
3+
<div class="Triangle Triangle--two"></div>
4+
<div class="Triangle Triangle--one"></div>
5+
<div class="Triangle Triangle--three"></div>
6+
<div class="Triangle Triangle--four"></div>
7+
</div>
8+
</template>
9+
10+
<style>
11+
.VueToNuxtLogo {
12+
display: inline-block;
13+
animation: turn 2s linear forwards 1s;
14+
transform: rotateX(180deg);
15+
position: relative;
16+
overflow: hidden;
17+
height: 180px;
18+
width: 245px;
19+
}
20+
21+
.Triangle {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
width: 0;
26+
height: 0;
27+
}
28+
29+
.Triangle--one {
30+
border-left: 105px solid transparent;
31+
border-right: 105px solid transparent;
32+
border-bottom: 180px solid #41B883;
33+
}
34+
35+
.Triangle--two {
36+
top: 30px;
37+
left: 35px;
38+
animation: goright 0.5s linear forwards 3.5s;
39+
border-left: 87.5px solid transparent;
40+
border-right: 87.5px solid transparent;
41+
border-bottom: 150px solid #3B8070;
42+
}
43+
44+
.Triangle--three {
45+
top: 60px;
46+
left: 35px;
47+
animation: goright 0.5s linear forwards 3.5s;
48+
border-left: 70px solid transparent;
49+
border-right: 70px solid transparent;
50+
border-bottom: 120px solid #35495E;
51+
}
52+
53+
.Triangle--four {
54+
top: 120px;
55+
left: 70px;
56+
animation: godown 0.5s linear forwards 3s;
57+
border-left: 35px solid transparent;
58+
border-right: 35px solid transparent;
59+
border-bottom: 60px solid #fff;
60+
}
61+
62+
@keyframes turn {
63+
100% {
64+
transform: rotateX(0deg);
65+
}
66+
}
67+
68+
@keyframes godown {
69+
100% {
70+
top: 180px;
71+
}
72+
}
73+
74+
@keyframes goright {
75+
100% {
76+
left: 70px;
77+
}
78+
}
79+
</style>

‎09-nuxt-server-side-rendering/components/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# COMPONENTS
2+
3+
The components directory contains your Vue.js Components.
4+
Nuxt.js doesn't supercharge these components.
5+
6+
**This directory is not required, you can delete it if you don't want to use it.**

‎09-nuxt-server-side-rendering/layouts/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# LAYOUTS
2+
3+
This directory contains your Application Layouts.
4+
5+
More information about the usage of this directory in the documentation:
6+
https://nuxtjs.org/guide/views#layouts
7+
8+
**This directory is not required, you can delete it if you don't want to use it.**

‎09-nuxt-server-side-rendering/layouts/default.vue

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<section class="container">
3+
<nuxt/>
4+
</section>
5+
</template>
6+
7+
<style>
8+
html {
9+
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10+
font-size: 16px;
11+
word-spacing: 1px;
12+
-ms-text-size-adjust: 100%;
13+
-webkit-text-size-adjust: 100%;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-font-smoothing: antialiased;
16+
box-sizing: border-box;
17+
}
18+
19+
*, *:before, *:after {
20+
box-sizing: border-box;
21+
margin: 0;
22+
}
23+
24+
.button--green {
25+
display: inline-block;
26+
border-radius: 4px;
27+
border: 1px solid #3b8070;
28+
color: #3b8070;
29+
text-decoration: none;
30+
padding: 10px 30px;
31+
}
32+
33+
.button--green:hover {
34+
color: #fff;
35+
background-color: #3b8070;
36+
}
37+
38+
.button--grey {
39+
display: inline-block;
40+
border-radius: 4px;
41+
border: 1px solid #35495e;
42+
color: #35495e;
43+
text-decoration: none;
44+
padding: 10px 30px;
45+
margin-left: 15px;
46+
}
47+
48+
.button--grey:hover {
49+
color: #fff;
50+
background-color: #35495e;
51+
}
52+
53+
.container {
54+
min-height: 100vh;
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
text-align: center;
59+
}
60+
61+
.title {
62+
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
63+
display: block;
64+
font-weight: 300;
65+
font-size: 100px;
66+
color: #35495e;
67+
letter-spacing: 1px;
68+
}
69+
70+
.subtitle {
71+
font-weight: 300;
72+
font-size: 42px;
73+
color: #526488;
74+
word-spacing: 5px;
75+
padding-bottom: 15px;
76+
}
77+
78+
.links {
79+
padding-top: 15px;
80+
}
81+
</style>

‎09-nuxt-server-side-rendering/middleware/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# MIDDLEWARE
2+
3+
This directory contains your Application Middleware.
4+
The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
5+
6+
More information about the usage of this directory in the documentation:
7+
https://nuxtjs.org/guide/routing#middleware
8+
9+
**This directory is not required, you can delete it if you don't want to use it.**

‎09-nuxt-server-side-rendering/nuxt.config.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const base = 'gh-pages' === process.env.NODE_ENV ? '/vue-examples/' : '/';
2+
3+
module.exports = {
4+
router: {
5+
base,
6+
},
7+
/*
8+
** Headers of the page
9+
*/
10+
head: {
11+
title: '09-nuxt-server-side-rendering',
12+
meta: [
13+
{ charset: 'utf-8' },
14+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
15+
{ hid: 'description', name: 'description', content: 'Nuxt.js server-side rendenring with Vue.js' }
16+
],
17+
link: [
18+
{ rel: 'icon', type: 'image/x-icon', href: `${base}favicon.ico` },
19+
],
20+
},
21+
/*
22+
** Customize the progress-bar color
23+
*/
24+
loading: { color: '#3B8070' },
25+
/*
26+
** Build configuration
27+
*/
28+
build: {
29+
publicPath: '/static/',
30+
/*
31+
** Run ESLINT on save
32+
*/
33+
extend(config, ctx) {
34+
if (ctx.dev && ctx.isClient) {
35+
config.module.rules.push({
36+
enforce: 'pre',
37+
test: /\.(js|vue)$/,
38+
loader: 'eslint-loader',
39+
exclude: /(node_modules)/
40+
});
41+
}
42+
}
43+
},
44+
};

‎09-nuxt-server-side-rendering/package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"homepage": "https://daggerok.github.io/vue-examples",
3+
"name": "09-nuxt-server-side-rendering",
4+
"version": "1.0.0",
5+
"description": "Nuxt.js server-side rendenring with Vue.js",
6+
"author": "Maksim Kostromin <[email protected]>",
7+
"private": true,
8+
"scripts": {
9+
"dev": "nuxt",
10+
"build": "nuxt build",
11+
"start": "nuxt start",
12+
"generate": "nuxt generate",
13+
"lint": "eslint --ext .js,.vue --ignore-path ../.gitignore .",
14+
"precommit": "npm run lint",
15+
"predeploy": "yarn install; npm-run-all predeploy:*",
16+
"predeploy:lint": "yarn lint",
17+
"predeploy:clean": "rimraf -rf dist",
18+
"predeploy:generate": "cross-env NODE_ENV=gh-pages nuxt generate",
19+
"predeploy:fallback": "ncp ./dist/index.html ./dist/404.html",
20+
"deploy": "gh-pages -d ./dist -b gh-pages -m \"Github Pages $(date +%Y-%m-%d) deployment\""
21+
},
22+
"dependencies": {
23+
"nuxt": "1.0.0-rc6"
24+
},
25+
"devDependencies": {
26+
"babel-eslint": "7.2.3",
27+
"cross-env": "5.0.5",
28+
"eslint": "4.5.0",
29+
"eslint-config-standard": "10.2.1",
30+
"eslint-loader": "1.9.0",
31+
"eslint-plugin-html": "3.2.0",
32+
"eslint-plugin-import": "2.7.0",
33+
"eslint-plugin-node": "5.1.1",
34+
"eslint-plugin-promise": "3.5.0",
35+
"eslint-plugin-standard": "3.0.1",
36+
"gh-pages": "1.0.0",
37+
"ncp": "2.0.0",
38+
"npm-run-all": "4.0.2",
39+
"rimraf": "2.6.1"
40+
}
41+
}

0 commit comments

Comments
 (0)