Skip to content

Commit 706b3c1

Browse files
FflorielFfloriel
committed
Merge remote-tracking branch 'upstream/master'
2 parents 89109a8 + a68f374 commit 706b3c1

23 files changed

+480
-18
lines changed

‎.circleci/config.yml

+4-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,7 @@ jobs:
1919
command: npm test -- --coverage
2020
- run:
2121
name: coverage
22-
command: cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .
22+
command: |
23+
if [ "${CIRCLE_BRANCH}" == "master" ]; then
24+
cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .
25+
fi

‎examples/with-nuxt/.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_size = 2
6+
indent_style = space
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎examples/with-nuxt/.eslintrc.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
node: true
6+
},
7+
parserOptions: {
8+
parser: 'babel-eslint'
9+
},
10+
extends: [
11+
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12+
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13+
'plugin:vue/essential'
14+
],
15+
// required to lint *.vue files
16+
plugins: [
17+
'vue'
18+
],
19+
// add your custom rules here
20+
rules: {}
21+
}

‎examples/with-nuxt/.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# dependencies
2+
node_modules
3+
4+
# logs
5+
npm-debug.log
6+
7+
# Nuxt build
8+
.nuxt
9+
10+
# Nuxt generate
11+
dist

‎examples/with-nuxt/README.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# with-nuxt
2+
3+
> Nuxt.js project
4+
5+
## Created with nuxtjs starter template
6+
7+
This example shows how to set up Purgecss with nuxtjs starter template.
8+
Once you initialzed your project with
9+
```
10+
vue init nuxt-community/starter-template <project-name>
11+
```
12+
install the webpack plugin for purgecss:
13+
```
14+
npm i --save-dev glob-all purgecss-webpack-plugin
15+
```
16+
17+
You need to modify the file `nuxt.config.js` by adding he following code:
18+
19+
line 1
20+
21+
```js
22+
const PurgecssPlugin = require('purgecss-webpack-plugin')
23+
const glob = require('glob-all')
24+
const path = require('path')
25+
```
26+
27+
line 44
28+
29+
```js
30+
if (!isDev) {
31+
// Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
32+
// for more information about purgecss.
33+
config.plugins.push(
34+
new PurgecssPlugin({
35+
paths: glob.sync([
36+
path.join(__dirname, './pages/**/*.vue'),
37+
path.join(__dirname, './layouts/**/*.vue'),
38+
path.join(__dirname, './components/**/*.vue')
39+
]),
40+
whitelist: ['html', 'body']
41+
})
42+
)
43+
}
44+
```
45+
46+
## Results
47+
48+
This example is importing the tachyons css framework.\
49+
Without purgecss, the css file size is **88.2 kB**.\
50+
Using purgecss, the css file is **1.56 kB**

‎examples/with-nuxt/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.**

‎examples/with-nuxt/components/AppLogo.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"/>
4+
<div class="Triangle Triangle--one"/>
5+
<div class="Triangle Triangle--three"/>
6+
<div class="Triangle Triangle--four"/>
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>

‎examples/with-nuxt/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.**

‎examples/with-nuxt/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.**

‎examples/with-nuxt/layouts/default.vue

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div>
3+
<nuxt/>
4+
</div>
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+
</style>

‎examples/with-nuxt/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.**

‎examples/with-nuxt/module.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const Purgecss = require('purgecss')
2+
3+
const defaultOptions = {
4+
content: ['layouts/**/*.vue', 'pages/**/*.vue', 'components/**/*.vue'],
5+
whitelist: []
6+
}
7+
8+
module.exports = function(moduleOptions = {}) {
9+
console.log(process.env)
10+
const options = Object.assign(defaultOptions, moduleOptions)
11+
console.log('this.options:::', this.options)
12+
}

‎examples/with-nuxt/nuxt.config.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const PurgecssPlugin = require('purgecss-webpack-plugin')
2+
const glob = require('glob-all')
3+
const path = require('path')
4+
5+
module.exports = {
6+
/*
7+
** Headers of the page
8+
*/
9+
head: {
10+
title: 'with-nuxt',
11+
meta: [
12+
{ charset: 'utf-8' },
13+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
14+
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
15+
],
16+
link: [
17+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
18+
]
19+
},
20+
css: [
21+
'tachyons/css/tachyons.min.css'
22+
],
23+
/*
24+
** Customize the progress bar color
25+
*/
26+
loading: { color: '#3B8070' },
27+
/*
28+
** Build configuration
29+
*/
30+
build: {
31+
extractCSS: true,
32+
/*
33+
** Run ESLint on save
34+
*/
35+
extend (config, { isDev, isClient }) {
36+
if (isDev && isClient) {
37+
config.module.rules.push({
38+
enforce: 'pre',
39+
test: /\.(js|vue)$/,
40+
loader: 'eslint-loader',
41+
exclude: /(node_modules)/
42+
})
43+
}
44+
if (!isDev) {
45+
// Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
46+
// for more information about purgecss.
47+
config.plugins.push(
48+
new PurgecssPlugin({
49+
paths: glob.sync([
50+
path.join(__dirname, './pages/**/*.vue'),
51+
path.join(__dirname, './layouts/**/*.vue'),
52+
path.join(__dirname, './components/**/*.vue')
53+
]),
54+
whitelist: ['html', 'body']
55+
})
56+
)
57+
}
58+
}
59+
}
60+
}

‎examples/with-nuxt/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "with-nuxt",
3+
"version": "1.0.0",
4+
"description": "Nuxt.js project",
5+
"author": "Ffloriel <florielfedry@gmail.com>",
6+
"private": true,
7+
"scripts": {
8+
"dev": "nuxt",
9+
"build": "nuxt build",
10+
"start": "nuxt start",
11+
"generate": "nuxt generate",
12+
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13+
"precommit": "npm run lint"
14+
},
15+
"dependencies": {
16+
"glob-all": "^3.1.0",
17+
"nuxt": "^1.0.0",
18+
"purgecss": "^0.20.0",
19+
"purgecss-webpack-plugin": "^0.20.1",
20+
"tachyons": "^4.9.1"
21+
},
22+
"devDependencies": {
23+
"babel-eslint": "^8.2.1",
24+
"eslint": "^4.15.0",
25+
"eslint-friendly-formatter": "^3.0.0",
26+
"eslint-loader": "^1.7.1",
27+
"eslint-plugin-vue": "^4.0.0"
28+
}
29+
}

‎examples/with-nuxt/pages/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# PAGES
2+
3+
This directory contains your Application Views and Routes.
4+
The framework reads all the .vue files inside this directory and creates the router of your application.
5+
6+
More information about the usage of this directory in the documentation:
7+
https://nuxtjs.org/guide/routing

0 commit comments

Comments
 (0)