ridzimeko/costa-vite-myna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setup Vue, Tailwind and MynaUI with Vite

Browse Source
This commit is contained in:
Amro Alfien 2024-11-18 21:18:52 +07:00
parent 02096d66a4
commit baa1705105
16 changed files with 1877 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -4,3 +4,7 @@
.beaker/data/* .beaker/data/*
!.beaker/data/.noremove !.beaker/data/.noremove
nohup.out nohup.out
# ignore node build
node_modules
static/vue

8
config/directory.py
View File

@ -5,9 +5,13 @@ page = {
} }
static = [ static = [
# {
# "route" :"/css/<filepath:re:.*\.(css|sass|css.map)>",
# "root" :"./static/css"
# },
{ {
"route" :"/css/<filepath:re:.*\.(css|sass|css.map)>", "route" :"/assets/<filepath:re:.*\.(js|css|json|svg|woff2?)>",
"root" :"./static/css" "root" :"./static/vue/assets"
} }
] ]
template.add(static, "templates") template.add(static, "templates")

27
handler.py
View File

@ -5,7 +5,7 @@
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. # This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
# You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/. # You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.
from bottle import Bottle, route from bottle import Bottle, static_file
from config import directory from config import directory
import templates.plain.main as template_public import templates.plain.main as template_public
@ -13,11 +13,20 @@ import modules.public.home as public_home
app = Bottle() app = Bottle()
@app.route('/') # @app.route('/')
def index(): # def index():
params = { # params = {
"mako":{ # "mako":{
"website" : template_public.main(directory.page["public"], "home") # "website" : template_public.main(directory.page["public"], "home")
} # }
} # }
return public_home.main().html(params) # return public_home.main().html(params)
@app.route('/assets/<filepath:path>')
def serve_static(filepath):
return static_file(filepath, root='./static/vue/assets')
@app.route('/<:re:.*>')
def serve_vue():
return static_file('index.html', root='./static/vue')

12
index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue + Tailwind + Mynaui</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

10
jsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@mynaIcon/*": ["./node_modules/@mynaui/icons/*"],
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "static/vue"]
}

25
package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "costa-vite-myna",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite dev"
},
"keywords": [],
"author": "Amro Alfien",
"license": "GPL-3.0-only",
"dependencies": {
"@mynaui/icons": "^0.3.2",
"@vitejs/plugin-vue": "^5.2.0",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"vite": "^5.4.11",
"vue": "^3.5.13",
"vue-router": "^4.4.5",
"vite-svg-loader": "^5.1.0"
}
}

1711
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

6
postcss.config.cjs Normal file
View File

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

21
src/App.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
import { RouterLink } from "vue-router";
import MynaAcademicHat from "@mynaIcon/icons/academic-hat.svg";
</script>
<template>
<div class="p-4 text-center">
<h1 class="text-4xl font-bold text-blue-600">Hello Vue + Tailwind!</h1>
<div class="flex gap-4 justify-center mt-4">
<p>Myna UI icon example :</p>
<MynaAcademicHat />
</div>
<div class="">
<div class="flex gap-4 justify-center my-6 text-blue-800">
<RouterLink class="hover:underline" to="/">Home</RouterLink>
<RouterLink class="hover:underline" to="/about">About</RouterLink>
</div>
<router-view></router-view>
</div>
</div>
</template>

3
src/index.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

9
src/main.js Normal file
View File

@ -0,0 +1,9 @@
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "./index.css";
const app = createApp(App);
app.use(router);
app.mount("#app");

3
src/pages/About.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h1>About Page</h1>
</template>

3
src/pages/Home.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h1>Home Page</h1>
</template>

15
src/router.js Normal file
View File

@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from "vue-router";
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

8
tailwind.config.cjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};

23
vite.config.js Normal file
View File

@ -0,0 +1,23 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
import path from "path";
export default defineConfig({
plugins: [
vue(),
svgLoader({
defaultImport: "component",
}),
],
build: {
outDir: "./static/vue",
emptyOutDir: true,
},
resolve: {
alias: {
"@mynaIcon": path.resolve(__dirname, "./node_modules/@mynaui/icons/"),
"@": path.resolve(__dirname, "./src/"),
},
},
});