[READ-ONLY] Mirror of https://github.com/hacknug/nuxt-boilerplate.
boilerplate-nuxt.netlify.app/
boilerplate
i18n
nuxt
nuxt-i18n
nuxtjs
vue
vue2
vuejs
vuejs2
Cleanup default components
Nestor Vera
(Jun 3, 2021, 7:10 PM +0200)
b79b2f3c
c6aa693f
+53
-143
-35
components/Logo.vue
-35
components/Logo.vue
···
1
-
<template>
2
-
<svg
3
-
class="NuxtLogo"
4
-
width="245"
5
-
height="180"
6
-
viewBox="0 0 452 342"
7
-
xmlns="http://www.w3.org/2000/svg"
8
-
>
9
-
<path
10
-
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
11
-
fill="#00C58E"
12
-
/>
13
-
<path
14
-
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
15
-
fill="#108775"
16
-
/>
17
-
<path
18
-
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
19
-
fill="#2F495E"
20
-
/>
21
-
</svg>
22
-
</template>
23
-
24
-
<style>
25
-
.NuxtLogo {
26
-
animation: 1s appear;
27
-
margin: auto;
28
-
}
29
-
30
-
@keyframes appear {
31
-
0% {
32
-
opacity: 0;
33
-
}
34
-
}
35
-
</style>
+18
components/site/SiteHeader.vue
+18
components/site/SiteHeader.vue
···
1
+
<template>
2
+
<header class="w-full">
3
+
<div :class="['container', 'flex items-center justify-between']">
4
+
<div>
5
+
<NuxtLink to="/">{{ $config.siteName }}</NuxtLink>
6
+
</div>
7
+
<div>
8
+
<NuxtLink to="/">{{ $config.siteDescription }}</NuxtLink>
9
+
</div>
10
+
</div>
11
+
</header>
12
+
</template>
13
+
14
+
<script>
15
+
export default {
16
+
name: 'SiteHeader',
17
+
}
18
+
</script>
+19
-48
layouts/default.vue
+19
-48
layouts/default.vue
···
1
1
<template>
2
-
<div>
3
-
<Nuxt />
4
-
</div>
5
-
</template>
2
+
<div :class="[!isProduction && 'debug-screens', 'flex flex-col items-center min-h-screen']">
3
+
<SiteHeader />
6
4
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
-
}
5
+
<main class="container">
6
+
<Nuxt />
7
+
</main>
18
8
19
-
*,
20
-
*::before,
21
-
*::after {
22
-
box-sizing: border-box;
23
-
margin: 0;
24
-
}
9
+
<SiteFooter class="mt-auto" />
25
10
26
-
.button--green {
27
-
display: inline-block;
28
-
border-radius: 4px;
29
-
border: 1px solid #3b8070;
30
-
color: #3b8070;
31
-
text-decoration: none;
32
-
padding: 10px 30px;
33
-
}
11
+
<PortalTarget name="modal" />
12
+
<PortalTarget name="debug" slim />
13
+
</div>
14
+
</template>
34
15
35
-
.button--green:hover {
36
-
color: #fff;
37
-
background-color: #3b8070;
16
+
<script>
17
+
export default {
18
+
name: 'LayoutDefault',
19
+
computed: {
20
+
isProduction () {
21
+
return process.env.NODE_ENV === 'production'
22
+
},
23
+
},
38
24
}
39
-
40
-
.button--grey {
41
-
display: inline-block;
42
-
border-radius: 4px;
43
-
border: 1px solid #35495e;
44
-
color: #35495e;
45
-
text-decoration: none;
46
-
padding: 10px 30px;
47
-
margin-left: 15px;
48
-
}
49
-
50
-
.button--grey:hover {
51
-
color: #fff;
52
-
background-color: #35495e;
53
-
}
54
-
</style>
25
+
</script>
+2
-60
pages/index.vue
+2
-60
pages/index.vue
···
1
1
<template>
2
-
<div class="container">
3
-
<div>
4
-
<Logo />
5
-
<h1 class="title !text-[blue]">{{ $config.siteName }}</h1>
6
-
<div class="links">
7
-
<a
8
-
href="https://nuxtjs.org/"
9
-
target="_blank"
10
-
rel="noopener noreferrer"
11
-
class="button--green"
12
-
>
13
-
Documentation
14
-
</a>
15
-
<a
16
-
href="https://github.com/nuxt/nuxt.js"
17
-
target="_blank"
18
-
rel="noopener noreferrer"
19
-
class="button--grey"
20
-
>
21
-
GitHub
22
-
</a>
23
-
</div>
24
-
</div>
2
+
<div>
3
+
<h1 class="title !text-[blue]">{{ $options.name }}</h1>
25
4
</div>
26
5
</template>
27
6
···
30
9
name: 'PageHome',
31
10
}
32
11
</script>
33
-
34
-
<style>
35
-
/* Sample `apply` at-rules with Tailwind CSS
36
-
.container {
37
-
@apply min-h-screen flex justify-center items-center text-center mx-auto;
38
-
}
39
-
*/
40
-
.container {
41
-
margin: 0 auto;
42
-
min-height: 100vh;
43
-
display: flex;
44
-
justify-content: center;
45
-
align-items: center;
46
-
text-align: center;
47
-
}
48
-
49
-
.title {
50
-
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
51
-
display: block;
52
-
font-weight: 300;
53
-
font-size: 100px;
54
-
color: #35495e;
55
-
letter-spacing: 1px;
56
-
}
57
-
58
-
.subtitle {
59
-
font-weight: 300;
60
-
font-size: 42px;
61
-
color: #526488;
62
-
word-spacing: 5px;
63
-
padding-bottom: 15px;
64
-
}
65
-
66
-
.links {
67
-
padding-top: 15px;
68
-
}
69
-
</style>