mirror of
https://github.com/rommapp/romm.git
synced 2026-10-12 02:21:58 +00:00
added vuetify to frontend
This commit is contained in:
zurdi zurdo
@@ -1,99 +0,0 @@
|
||||
<script>
|
||||
import Game from './components/Game.vue';
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
server: "asgard",
|
||||
port: "5001",
|
||||
currentPlatform: "",
|
||||
platformsLoaded: false,
|
||||
scaning: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log("Getting platforms...")
|
||||
axios.get('http://'+this.server+':'+this.port+'/platforms').then((response) => {
|
||||
console.log("Platforms loaded!")
|
||||
console.log(response.data)
|
||||
this.platforms = response.data.data
|
||||
this.platformsLoaded = true
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
scan(overwrite) {
|
||||
this.scaning = true
|
||||
axios.get('http://'+this.server+':'+this.port+'/scan?overwrite='+overwrite).then((response) => {
|
||||
console.log("scan completed")
|
||||
console.log(response.data)
|
||||
this.scaning = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="plat_container">
|
||||
<div class="table_plat">
|
||||
<ul class="row_plat">
|
||||
<li v-if="platformsLoaded" v-for="platform in platforms">
|
||||
<div>
|
||||
<a v-on:click="this.currentPlatform = platform.slug">
|
||||
<img class="plat" :src=platform.path_logo>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="game_container">
|
||||
<Game v-if="platformsLoaded" :platform=this.currentPlatform :key=this.currentPlatform />
|
||||
</div> -->
|
||||
<div>
|
||||
<div class="table_plat">
|
||||
<ul class="row_plat">
|
||||
<li>
|
||||
<button @click="scan(false)">Scan</button>
|
||||
</li>
|
||||
<li>
|
||||
<button @click="scan(true)">Force Scan</button>
|
||||
</li>
|
||||
<li>
|
||||
<h3 v-if="scaning">Scanning...</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plat {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
max-width: 160px;
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.table_plat .row_plat {
|
||||
/* border: 2px solid green; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.table_plat .row_plat li {
|
||||
/* border: 2px solid red; */
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-size: x-small;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
# base
|
||||
|
||||
## Project setup
|
||||
|
||||
```
|
||||
# yarn
|
||||
yarn
|
||||
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
|
||||
```
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
|
||||
```
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
|
||||
```
|
||||
# yarn
|
||||
yarn lint
|
||||
|
||||
# npm
|
||||
npm run lint
|
||||
|
||||
# pnpm
|
||||
pnpm lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
|
||||
See [Configuration Reference](https://vitejs.dev/config/).
|
||||
@@ -1,74 +0,0 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
@@ -1,33 +0,0 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
margin: 0;
|
||||
/* padding: 2rem; */
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a, .green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
/* place-items: center; */
|
||||
}
|
||||
|
||||
#app {
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 1fr 1fr; */
|
||||
/* padding: 0 2rem; */
|
||||
/* border: 2px solid orange; */
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
props: { platform: String },
|
||||
data() {
|
||||
return {
|
||||
server: "asgard",
|
||||
gamesLoaded: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log("Getting roms...")
|
||||
axios.get('http://'+this.server+':5000/platforms/'+this.platform+'/roms').then((response) => {
|
||||
console.log("Romds loaded!")
|
||||
console.log(response.data)
|
||||
this.games = response.data
|
||||
this.gamesLoaded = true
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="table_games">
|
||||
<ul class="row_games">
|
||||
<li v-if="gamesLoaded" v-for="game in games">
|
||||
<div>
|
||||
<img class="game_cover" :src=game.props.cover_url>
|
||||
<h3 class="game_title">{{ game.filename }}</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table_games .row_games {
|
||||
/* border: 2px solid blue; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.table_games .row_games li {
|
||||
/* border: 2px solid purple; */
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
font-size: x-small;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.table_games .row_games li .game_title {
|
||||
width: 205px;
|
||||
}
|
||||
|
||||
.table_games .row_games li .game_cover {
|
||||
width: 205px;
|
||||
}
|
||||
</style>
|
||||
+13
-10
@@ -1,13 +1,16 @@
|
||||
<!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="main.js"></script>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Welcome to Vuetify 3</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import Game from './components/Game.vue'
|
||||
|
||||
import './assets/main.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.component('Game', Game);
|
||||
app.mount('#app');
|
||||
Generated
+2570
-338
File diff suppressed because it is too large
Load Diff
+22
-6
@@ -1,18 +1,34 @@
|
||||
{
|
||||
"name": "romm",
|
||||
"name": "vuetify-project",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "7.0.96",
|
||||
"axios": "^1.3.4",
|
||||
"vue": "^3.2.47"
|
||||
"core-js": "^3.8.3",
|
||||
"roboto-fontface": "*",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.0.0",
|
||||
"vuetify": "^3.0.0",
|
||||
"webfontloader": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"vite": "^4.1.4"
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/webfontloader": "^1.6.35",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"@vue/eslint-config-typescript": "^11.0.0",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"sass": "^1.55.0",
|
||||
"typescript": "^4.0.0",
|
||||
"vite": "^3.0.9",
|
||||
"vite-plugin-vuetify": "^1.0.0-alpha.12",
|
||||
"vue-tsc": "^1.0.9"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
|
||||
<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
|
||||
<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
|
||||
<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 526 B |
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<platforms-bar />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PlatformsBar from './PlatformsBar.vue'
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
server: "asgard",
|
||||
port: "5000",
|
||||
currentPlatform: "",
|
||||
platformsLoaded: false,
|
||||
scaning: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log("Getting platforms...")
|
||||
axios.get('http://'+this.server+':'+this.port+'/platforms').then((response) => {
|
||||
console.log("Platforms loaded!")
|
||||
console.log(response.data)
|
||||
this.platforms = response.data.data
|
||||
this.platformsLoaded = true
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
scan(overwrite) {
|
||||
this.scaning = true
|
||||
axios.get('http://'+this.server+':'+this.port+'/scan?overwrite='+overwrite).then((response) => {
|
||||
console.log("scan completed")
|
||||
console.log(response.data)
|
||||
this.scaning = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-layout>
|
||||
<v-navigation-drawer thene="dark" class="transparent">
|
||||
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi mdi-controller">Rom Manager</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-divider class="text-black"></v-divider>
|
||||
|
||||
<v-list :items="platforms" item-title="name" item-value="slug" density="compact" nav v-if="platformsLoaded" />
|
||||
|
||||
</v-navigation-drawer>
|
||||
</v-layout>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* main.ts
|
||||
*
|
||||
* Bootstraps Vuetify and other plugins then mounts the App`
|
||||
*/
|
||||
|
||||
// Components
|
||||
import App from './App.vue'
|
||||
|
||||
// Composables
|
||||
import { createApp } from 'vue'
|
||||
|
||||
// Plugins
|
||||
import { registerPlugins } from '@/plugins'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
registerPlugins(app)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* plugins/index.ts
|
||||
*
|
||||
* Automatically included in `./src/main.ts`
|
||||
*/
|
||||
|
||||
// Plugins
|
||||
import { loadFonts } from './webfontloader'
|
||||
import vuetify from './vuetify'
|
||||
import router from '../router'
|
||||
|
||||
// Types
|
||||
import type { App } from 'vue'
|
||||
|
||||
export function registerPlugins (app: App) {
|
||||
loadFonts()
|
||||
app
|
||||
.use(vuetify)
|
||||
.use(router)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* plugins/vuetify.ts
|
||||
*
|
||||
* Framework documentation: https://vuetifyjs.com`
|
||||
*/
|
||||
|
||||
// Styles
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import 'vuetify/styles'
|
||||
|
||||
// Composables
|
||||
import { createVuetify } from 'vuetify'
|
||||
|
||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
export default createVuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
colors: {
|
||||
primary: '#1867C0',
|
||||
secondary: '#5CBBF6',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* plugins/webfontloader.ts
|
||||
*
|
||||
* webfontloader documentation: https://github.com/typekit/webfontloader
|
||||
*/
|
||||
|
||||
export async function loadFonts () {
|
||||
const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
|
||||
|
||||
webFontLoader.load({
|
||||
google: {
|
||||
families: ['Roboto:100,300,400,500,700,900&display=swap'],
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// Composables
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/layouts/default/Home.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* src/styles/settings.scss
|
||||
*
|
||||
* Configures SASS variables and Vuetify overwrites
|
||||
*/
|
||||
|
||||
// https://next.vuetifyjs.com/features/sass-variables/`
|
||||
// @use 'vuetify' with (
|
||||
// $color-pack: false
|
||||
// );
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true,
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,41 @@
|
||||
// Plugins
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
|
||||
|
||||
// Utilities
|
||||
import { defineConfig } from 'vite'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue({
|
||||
template: { transformAssetUrls }
|
||||
}),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
|
||||
vuetify({
|
||||
autoImport: true,
|
||||
styles: {
|
||||
configFile: 'src/styles/settings.scss',
|
||||
},
|
||||
}),
|
||||
],
|
||||
define: { 'process.env': {} },
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
extensions: [
|
||||
'.js',
|
||||
'.json',
|
||||
'.jsx',
|
||||
'.mjs',
|
||||
'.ts',
|
||||
'.tsx',
|
||||
'.vue',
|
||||
],
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user