Siklos/vue-playground
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

initial commit

Browse source
This commit is contained in:
Hydroxycarbamide 2022-05-15 01:08:46 +02:00
commit aa56b724f2
18 changed files with 2718 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# Vue 3 + Vite + Tailwind css
Just having fun with Vue 3 + Vite + Tailwind css

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2477
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

25
package.json Normal file
View file

@ -0,0 +1,25 @@
{
"name": "my-project",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"vue": "^3.2.33"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
"vite": "^2.9.7"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

29
src/App.vue Normal file
View file

@ -0,0 +1,29 @@
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from './components/HelloWorld.vue'
import Sidebar from './components/Sidebar.vue';
import Content from './components/Content.vue';
</script>
<template>
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
<!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
<div class="flex">
<Sidebar class="flex-none" />
<div class="flex-1">
<Content />
</div>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

BIN
src/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

27
src/components/Card.vue Normal file
View file

@ -0,0 +1,27 @@
<script setup>
const props = defineProps({
title: String,
description: String
})
</script>
<template>
<div class="rounded-xl bg-white mx-auto max-w-md shadow-xl">
<div class="md:flex">
<div class="md:shrink-0">
</div>
<div class="p-8">
<a class="font-medium text-black hover:underline tracking-wide">
{{title}}
</a>
<p class="mt-2 text-slate-500">
{{description}}
</p>
</div>
</div>
</div>
</template>

8
src/components/Content.vue Normal file
View file

@ -0,0 +1,8 @@
<script setup>
import Card from './Card.vue';
</script>
<template>
<Card title="My Product" description="My description" />
</template>

20
src/components/Sidebar.vue Normal file
View file

@ -0,0 +1,20 @@
<script setup>
import { ref } from 'vue'
import SidebarIcon from "./SidebarIcon.vue";
const icon = ref('fire');
const icon2 = ref('plus');
const icon3 = ref('poo');
const text = ref('Fire');
const text2 = ref('Plus');
const text3 = ref('Poo');
</script>
<template>
<div class="fixed top-0 left-0
m-0 h-screen bg-slate-900
text-white shadow-lg w-16 flex flex-col">
<SidebarIcon :icon="icon" :text="text"></SidebarIcon>
<SidebarIcon :icon="icon2" :text="text2"></SidebarIcon>
<SidebarIcon :icon="icon3" :text="text3"></SidebarIcon>
</div>
</template>

15
src/components/SidebarIcon.vue Normal file
View file

@ -0,0 +1,15 @@
<script setup>
const props = defineProps({
icon: String,
text: String
})
</script>
<template>
<i class="sidebar-icon group">
<font-awesome-icon :icon="['fas', icon]" />
<span class="sidebar-tooltip group-hover:scale-100">
{{ text }}
</span>
</i>
</template>

22
src/index.css Normal file
View file

@ -0,0 +1,22 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.sidebar-icon {
@apply relative flex items-center
justify-center h-12 w-12 mt-2 mb-2 mx-auto
text-green-500 hover:bg-green-600 bg-gray-800
rounded-3xl hover:rounded-xl transition-all duration-300
ease-linear cursor-pointer;
}
.sidebar-tooltip {
@apply absolute w-auto p-2 m-2 min-w-max left-14
rounded-md shadow-md
text-white bg-gray-900
text-xs font-bold
transition-all duration-100 scale-0 origin-left;
}
}

23
src/main.js Normal file
View file

@ -0,0 +1,23 @@
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch();
import { faFire, faPlus, faPoo } from "@fortawesome/free-solid-svg-icons";
library.add(faFire);
library.add(faPlus);
library.add(faPoo);
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');

16
tailwind.config.js Normal file
View file

@ -0,0 +1,16 @@
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
gray: {
900: '#202225'
}
}
},
},
plugins: [],
}

7
vite.config.js Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})