Skip to content

Commit ae072ff

Browse files
committed
feat: setup tailwindcss
0 parents  commit ae072ff

24 files changed

+11780
-0
lines changed

.eslintrc.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
node: true,
6+
},
7+
extends: [
8+
'@nuxtjs/eslint-config-typescript',
9+
'plugin:nuxt/recommended',
10+
'plugin:prettier/recommended',
11+
],
12+
plugins: [],
13+
rules: {},
14+
}

.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.yarn/releases/** binary
2+
/.yarn/plugins/** binary

.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# nuxtjs
2+
.nuxt
3+
.nitro
4+
.cache
5+
.output
6+
.env
7+
dist
8+
9+
# package manager
10+
.pnp.*
11+
.yarn/*
12+
node_modules
13+
!.yarn/patches
14+
!.yarn/plugins
15+
!.yarn/releases
16+
!.yarn/sdks
17+
!.yarn/versions
18+
19+
# misc
20+
*.log*
21+
.DS_Store

.husky/commit-msg

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npx --no -- commitlint --edit

.husky/pre-commit

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npx lint-staged -c lint-staged.config.js

.prettierignore

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
###
2+
# Place your Prettier ignore content here
3+
4+
###
5+
# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
6+
7+
# Created by .ignore support plugin (hsz.mobi)
8+
### Node template
9+
# Logs
10+
/logs
11+
*.log
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
16+
# Runtime data
17+
pids
18+
*.pid
19+
*.seed
20+
*.pid.lock
21+
22+
# Directory for instrumented libs generated by jscoverage/JSCover
23+
lib-cov
24+
25+
# Coverage directory used by tools like istanbul
26+
coverage
27+
28+
# nyc test coverage
29+
.nyc_output
30+
31+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
32+
.grunt
33+
34+
# Bower dependency directory (https://bower.io/)
35+
bower_components
36+
37+
# node-waf configuration
38+
.lock-wscript
39+
40+
# Compiled binary addons (https://nodejs.org/api/addons.html)
41+
build/Release
42+
43+
# Dependency directories
44+
node_modules/
45+
jspm_packages/
46+
47+
# TypeScript v1 declaration files
48+
typings/
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Optional REPL history
57+
.node_repl_history
58+
59+
# Output of 'npm pack'
60+
*.tgz
61+
62+
# Yarn Integrity file
63+
.yarn-integrity
64+
65+
# dotenv environment variables file
66+
.env
67+
68+
# parcel-bundler cache (https://parceljs.org/)
69+
.cache
70+
71+
# next.js build output
72+
.next
73+
74+
# nuxt.js build output
75+
.nuxt
76+
77+
# Nuxt generate
78+
dist
79+
80+
# vuepress build output
81+
.vuepress/dist
82+
83+
# Serverless directories
84+
.serverless
85+
86+
# IDE / Editor
87+
.idea
88+
89+
# Service worker
90+
sw.*
91+
92+
# macOS
93+
.DS_Store
94+
95+
# Vim swap files
96+
*.swp

.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"tabWidth": 2,
3+
"singleQuote": true,
4+
"semi": false
5+
}

.yarnrc.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

README.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# NuxtJS With Typescript Example Template
2+
3+
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
4+
5+
An example template scaffolded using [Nuxt.js](https://v3.nuxtjs.org) with Typescript and [sass](https://sass-lang.com/) to start a new project.
6+
7+
## Why this template
8+
9+
This template includes pre-installed plugins suchas [prettier](https://prettier.io/), [eslint](https://eslint.org/), [stylelint](https://stylelint.io/), [lint-staged](https://github.com/okonet/lint-staged), [commitlint](https://commitlint.js.org/) and [standard version](https://github.com/conventional-changelog/standard-version) which helps to maintain project code quality.
10+
11+
## Before getting started
12+
13+
Make sure you have installed [Node.js 16.11.0 or higher](https://nodejs.org/en/) on your machine. You can use [nvm](https://github.com/nvm-sh/nvm) to manage multiple node version on your machine.
14+
15+
## Getting started
16+
17+
You can setup this project using npm or yarn package managers.
18+
19+
> I would recommend to installed or enabled [yarn 3.1.1 or higher](https://yarnpkg.com/getting-started) package manager on your machine.
20+
21+
### Clone repo
22+
23+
```bash
24+
# https
25+
git clone https://github.com/binodnepali/nuxtjs-with-typescript-example-template.git
26+
27+
# ssh
28+
git clone [email protected]:binodnepali/nuxtjs-with-typescript-example-template.git
29+
```
30+
31+
### Navigate to cloned repo
32+
33+
```bash
34+
cd nuxtjs-with-typescript-example-template
35+
```
36+
37+
### Setup
38+
39+
Make sure to install the dependencies:
40+
41+
```bash
42+
# yarn
43+
yarn install
44+
45+
# npm
46+
npm install
47+
```
48+
49+
### Development Server
50+
51+
Start the development server on http://localhost:3000
52+
53+
```bash
54+
# yarn
55+
yarn dev
56+
57+
# npm
58+
npm run dev
59+
```
60+
61+
### Production
62+
63+
Build the application for production
64+
65+
```bash
66+
# yarn
67+
yarn build
68+
69+
# npm
70+
npm run build
71+
```
72+
73+
Locally preview production build
74+
75+
```bash
76+
# yarn
77+
yarn preview
78+
79+
# npm
80+
npm run preview
81+
```
82+
83+
### Lint
84+
85+
```bash
86+
# yarn
87+
yarn lint
88+
89+
# npm
90+
npm run lint
91+
```
92+
93+
### Lint fix
94+
95+
```bash
96+
# yarn
97+
yarn lint:fix
98+
99+
# npm
100+
npm run lint:fix
101+
```
102+
103+
### Lint style
104+
105+
```bash
106+
# yarn
107+
yarn lint:style
108+
109+
# npm
110+
npm run lint:style
111+
```
112+
113+
### Lint style fix
114+
115+
```bash
116+
# yarn
117+
yarn lint:style:fix
118+
119+
# npm
120+
npm run lint:style:fix
121+
```
122+
123+
### Commit
124+
125+
Open interactive terminal to write conventional commit message
126+
127+
```bash
128+
# yarn
129+
yarn commit
130+
131+
# npm
132+
npm run commit
133+
```
134+
135+
### Release
136+
137+
Create a release tag and generates change log based on commit history
138+
139+
```bash
140+
# yarn
141+
yarn release
142+
143+
# npm
144+
npm run release
145+
```
146+
147+
## References
148+
149+
* Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

app.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
5+
</template>

commitlint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { extends: ['@commitlint/config-conventional'] }

components/TheFooter.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div>
3+
<ul>
4+
<li>Copyright - {{ date.getFullYear() }}</li>
5+
</ul>
6+
</div>
7+
</template>
8+
9+
<script setup lang="ts">
10+
const date = ref(new Date())
11+
</script>
12+
13+
<style scoped lang="scss">
14+
div {
15+
background-color: black;
16+
color: #fff;
17+
padding: 0.2rem;
18+
19+
ul {
20+
list-style: none;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
}
26+
</style>

components/TheHeader.vue

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<header>
3+
<nav>
4+
<ul>
5+
<li>
6+
<NuxtLink to="/">Home</NuxtLink>
7+
</li>
8+
<li>
9+
<NuxtLink to="/posts">Posts</NuxtLink>
10+
</li>
11+
<li>
12+
<NuxtLink to="/about">About</NuxtLink>
13+
</li>
14+
</ul>
15+
</nav>
16+
</header>
17+
</template>
18+
19+
<style scoped lang="scss">
20+
header {
21+
background-color: black;
22+
color: #fff;
23+
padding: 0.2rem;
24+
25+
nav {
26+
ul {
27+
list-style: none;
28+
display: flex;
29+
align-items: center;
30+
31+
li {
32+
margin-right: 1rem;
33+
34+
a {
35+
color: #fff;
36+
text-decoration: none;
37+
}
38+
}
39+
}
40+
}
41+
}
42+
</style>

layouts/default.vue

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>
3+
<TheHeader />
4+
<slot />
5+
<TheFooter />
6+
</div>
7+
</template>

lint-staged.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
'*.{ts,js,vue}': 'eslint --fix',
3+
'*.{css,scss,sass,html,vue}': 'stylelint --fix',
4+
}

0 commit comments

Comments
 (0)