Skip to content

Commit a779cca

Browse files
vivekascodervivekascoder
committed
Added Vite + Vue + Vue Router + VueX + Tailwindcss with JIT
0 parents commit a779cca

File tree

19 files changed

+1499
-0
lines changed

19 files changed

+1499
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "vite-vue-tailwind-jit",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"vue": "^3.2.6",
11+
"vue-router": "4",
12+
"vuex": "^4.0.2"
13+
},
14+
"devDependencies": {
15+
"@tailwindcss/jit": "^0.1.18",
16+
"@vitejs/plugin-vue": "^1.6.1",
17+
"@vue/compiler-sfc": "^3.2.6",
18+
"autoprefixer": "^10.3.4",
19+
"postcss": "^8.3.6",
20+
"tailwindcss": "^2.2.15",
21+
"vite": "^2.5.4"
22+
}
23+
}

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/favicon.ico‎

4.19 KB
Binary file not shown.

‎src/App.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script setup>
2+
import Navbar from './components/Navbar.vue';
3+
const links = [
4+
{id: 1, name: 'Home', path: '/'},
5+
{id: 2, name: 'About Us', path: '/about'},
6+
{id: 3, name: 'Docs', path: '/docs'}
7+
]
8+
</script>
9+
10+
<template>
11+
<Navbar title="DemoApp" :links="links" />
12+
<div class="pt-20">
13+
<router-view />
14+
</div>
15+
</template>
16+
17+
<style>
18+
</style>

‎src/components/Navbar.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup>
2+
import {defineProps} from 'vue'
3+
import Button from './forms/Button.vue';
4+
5+
const props = defineProps({
6+
title: {type: String, required: true},
7+
links: {type: Array, required: true}
8+
});
9+
</script>
10+
11+
<template>
12+
<div class="fixed left-0 right-0 top-0 h-16 shadow-md border-b-2 border-gray-100 bg-gray-900">
13+
<nav class="flex items-center container mx-auto h-full justify-between">
14+
<h1 class="font-semibold uppercase text-lg text-gray-200">
15+
{{title}}
16+
</h1>
17+
<div>
18+
<ul class="flex items-center space-x-10 text-sm">
19+
<li v-for="link in props.links" :key="link.id">
20+
<router-link :to="link.path" class="text-gray-400 hover:text-gray-100">
21+
{{link.name}}
22+
</router-link>
23+
</li>
24+
</ul>
25+
</div>
26+
<div>
27+
<Button text="Login"/>
28+
</div>
29+
</nav>
30+
</div>
31+
</template>

‎src/components/forms/Button.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup>
2+
import { defineProps } from 'vue';
3+
const props = defineProps({
4+
text: { type: String, required: true }
5+
});
6+
</script>
7+
8+
<template>
9+
<div>
10+
<button
11+
class="px-6 py-2 text-sm font-semibold uppercase rounded-sm text-white transition bg-gradient-to-r from-purple-500 to-blue-500"
12+
>{{ props.text }}</button>
13+
</div>
14+
</template>

‎src/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
4+
import store from './store'
5+
import './static/css/index.css';
6+
7+
createApp(App).use(router).use(store).mount('#app')

0 commit comments

Comments
 (0)