jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-12-04 12:23:29 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore(vite): switch to Vue 3

Browse Source
This commit is contained in:
Fernando Fernández 2022-09-09 00:31:13 +02:00
parent 0232a3f1f3
commit e515e20cfb
13 changed files with 570 additions and 900 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/index.html
View File

@ -2,8 +2,7 @@
<html lang="en">
<head>
<style>
body > .splashLogo,
html > .splashLogo {
html > body > div#app > div.splashLogo {
background: #111827;
width: 100%;
height: 100%;
@ -18,7 +17,7 @@
width: 30%;
height: 30%;
/* This file is in the 'static' folder, so it will be placed at the root when the client is built */
background-image: url(/icon.png);
background-image: url(icon.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
@ -26,13 +25,16 @@
</style>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
<title>Jellyfin</title>
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<div id="app">
<div class="splashLogo"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

19
frontend/package.json
View File

@ -28,6 +28,7 @@
},
"dependencies": {
"@jellyfin/client-axios": "10.7.8",
"@vueuse/components": "9.2.0",
"@vueuse/core": "9.2.0",
"axios": "0.27.2",
"blurhash": "1.1.5",
@ -41,17 +42,12 @@
"pinia": "2.0.14",
"screenfull": "6.0.1",
"shaka-player": "4.1.1",
"simple-icons": "7.4.0",
"swiper": "5.x",
"swiper": "8.3.2",
"uuid": "8.3.2",
"vee-validate": "3.4.14",
"vue": "2.7.10",
"vue-awesome-swiper": "4.1.1",
"vue-i18n": "8.27.2",
"vue-router": "3.6.5",
"vue-virtual-scroller": "1.0.10",
"vuedraggable": "2.24.3",
"vuetify": "2.6.9"
"vee-validate": "4.6.7",
"vue": "3.2.39",
"vue-i18n": "9.2.2",
"vue-router": "4.1.5"
},
"devDependencies": {
"@iconify/json": "2.1.104",
@ -62,6 +58,7 @@
"@types/swiper": "5.4.3",
"@types/tizen-tv-webapis": "2.0.1",
"@types/uuid": "8.3.4",
"@vitejs/plugin-vue": "3.1.0",
"confusing-browser-globals": "1.0.11",
"sass": "1.54.9",
"typescript": "4.8.2",
@ -71,7 +68,7 @@
"vite-plugin-pages": "0.26.0",
"vite-plugin-pwa": "0.12.7",
"vite-plugin-vue-layouts": "0.7.0",
"vite-plugin-vue2": "2.0.2",
"vite-plugin-vuetify": "1.0.0-alpha.16",
"vue-i18n-extract": "2.0.7",
"vue-tsc": "0.34.16"
},

2
frontend/src/assets/styles/Carousel/index.scss
View File

@ -1,5 +1,3 @@
@import '~vuetify/src/styles/styles.sass';
.default-icon {
display: flex;
align-content: center;

2
frontend/src/components/Players/PlayerDialog.vue
View File

@ -1,6 +1,6 @@
<script lang="ts">
import Vue from 'vue';
import { VDialog } from 'vuetify/lib';
import { VDialog } from 'vuetify/components';
// @ts-expect-error - These typings are not declared
import { keyCodes } from 'vuetify/lib/util/helpers';

6
frontend/src/components/RouterViewTransition.vue
View File

@ -19,7 +19,7 @@
</template>
<script setup lang="ts">
import RouteLocationNormalized from 'vue-router';
import { RouteLocationNormalized } from 'vue-router';
interface Props {
/**
@ -39,8 +39,8 @@ const props = withDefaults(defineProps<Props>(), {
function getKey(route: RouteLocationNormalized) {
if (props.isRoot) {
return String(route.currentRoute.meta?.layout) || 'default';
return String(route.meta.layout) || 'default';
}
return String(route.currentRoute.name);
return String(route.name);
}
</script>

84
frontend/src/main.ts
View File

@ -1,31 +1,15 @@
import { createPinia, PiniaVuePlugin } from 'pinia';
import Vue from 'vue';
import { createPinia } from 'pinia';
import { createApp } from 'vue';
/**
* Main imports
*/
import App from '@/App.vue';
import Root from '@/App.vue';
import router from '@/plugins/vue/router';
import {
messages,
DEFAULT_LANGUAGE,
BROWSER_LANGUAGE
} from '@/plugins/vue/i18n';
import i18n from '@/plugins/vue/i18n';
import vuetify from '@/plugins/vue/vuetify';
import { hideDirective } from '@/plugins/vue/directives';
import piniaPlugins from '@/plugins/store';
import axiosInstance from '@/plugins/axios';
import Vuetify from 'vuetify/lib';
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';
/**
* Component imports
*/
import { ValidationProvider, ValidationObserver } from 'vee-validate';
import draggable from 'vuedraggable';
// @ts-expect-error - target typing doesn't exist as we declared it in params.
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
/**
* CSS Imports
*/
@ -40,60 +24,18 @@ const pinia = createPinia();
pinia.use(piniaPlugins);
/**
* Vue global config
* App initialization
*/
Vue.config.performance = true;
const app = createApp(Root);
/**
* Vue.use statements
*
* TODO: This can be removed in Vue 3. We need to merge all these statements in this file because if we don't do this, we're creating multiple
* Vue instances.
*/
Vue.use(Vuetify);
Vue.use(PiniaVuePlugin);
Vue.use(VueRouter);
Vue.use(VueI18n);
// Components
Vue.use(VueAwesomeSwiper);
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('Draggable', draggable);
Vue.component('DynamicScroller', DynamicScroller);
Vue.component('DynamicScrollerItem', DynamicScrollerItem);
const i18n = new VueI18n({
locale: Object.keys(messages).includes(BROWSER_LANGUAGE)
? BROWSER_LANGUAGE
: DEFAULT_LANGUAGE,
fallbackLocale: DEFAULT_LANGUAGE,
messages
});
app.use(router);
app.use(pinia);
app.use(vuetify);
app.use(i18n);
/**
* Vue directives
*/
app.directive('hide', hideDirective);
// Toggles the CSS 'visibility' property of an element.
Vue.directive('hide', (el, binding) => {
if (el) {
if (binding.value === true) {
el.style.visibility = 'hidden';
} else {
el.style.visibility = 'visible';
}
}
});
/**
* App initialization
*/
const app = new Vue({
router,
pinia,
vuetify,
i18n,
render: (h) => h(App)
});
Vue.prototype.$axios = axiosInstance;
app.$mount('#app');
app.mount('#app');

17
frontend/src/plugins/vue/directives.ts Normal file
View File

@ -0,0 +1,17 @@
import Vue from 'vue';
/**
* Toggles the CSS 'visibility' property of an element.
*/
export function hideDirective(
el: HTMLElement,
binding: Vue.DirectiveBinding<any>
) {
if (el) {
if (binding.value === true) {
el.style.visibility = 'hidden';
} else {
el.style.visibility = 'visible';
}
}
}

20
frontend/src/plugins/vue/i18n.ts
View File

@ -1,10 +1,10 @@
import VueI18n from 'vue-i18n';
import { createI18n } from 'vue-i18n';
export const DEFAULT_LANGUAGE = 'en';
export const BROWSER_LANGUAGE = navigator?.language?.split('-')[0];
const DEFAULT_LANGUAGE = 'en';
const BROWSER_LANGUAGE = navigator?.language?.split('-')[0];
function getMessages() {
const messages: VueI18n.LocaleMessages = {};
const messages: any = {};
// See: https://vitejs.dev/guide/features.html#glob-import
const localeFiles = import.meta.glob('../../locales/*.json');
for (const path in localeFiles) {
@ -19,4 +19,14 @@ function getMessages() {
return messages;
}
export const messages = getMessages();
const messages = getMessages();
const i18n = createI18n({
locale: Object.keys(messages).includes(BROWSER_LANGUAGE)
? BROWSER_LANGUAGE
: DEFAULT_LANGUAGE,
fallbackLocale: DEFAULT_LANGUAGE,
legacy: true, // Enables $t(), $tc(), etc in templates
messages
});
export default i18n;

6
frontend/src/plugins/vue/router.ts
View File

@ -1,9 +1,9 @@
import VueRouter from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';
import { setupLayouts } from 'virtual:generated-layouts';
import generatedRoutes from '~pages';
const router = new VueRouter({
fallback: true,
const router = createRouter({
history: createWebHistory(),
routes: setupLayouts(generatedRoutes)
});

11
frontend/src/plugins/vue/vuetify.ts
View File

@ -1,11 +1,8 @@
/** Vuetify Plugin */
import type { UserVuetifyPreset } from 'vuetify';
import variables from '@/assets/styles/variables.scss';
import Vuetify from 'vuetify';
import { createVuetify } from 'vuetify';
export default createVuetify({
customVariables: [variables],
treeShake: true,
defaultAssets: false,
theme: {
dark: true,
@ -13,6 +10,7 @@ export default createVuetify({
disable: false,
themes: {
dark: {
name: 'dark',
primary: '#9d37c2',
secondary: '#2f3951',
accent: '#FF4081',
@ -42,8 +40,3 @@ export default createVuetify({
}
}
});
/** Create Vuetify */
export function createVuetify(options: UserVuetifyPreset): Vuetify {
return new Vuetify(options);
}

3
frontend/tsconfig.json
View File

@ -28,8 +28,5 @@
"vue"
]
},
"vueCompilerOptions": {
"target": 2.7
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "./*.d.ts"]
}

27
frontend/vite.config.ts
View File

@ -1,12 +1,15 @@
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import {
Vuetify3Resolver,
VueUseComponentsResolver
} from 'unplugin-vue-components/resolvers';
import { VitePWA } from 'vite-plugin-pwa';
// https://vitejs.dev/config/
@ -20,7 +23,7 @@ export default defineConfig({
)
},
plugins: [
createVuePlugin(),
vue(),
Pages({
routeStyle: 'nuxt'
}),
@ -31,27 +34,21 @@ export default defineConfig({
* The icons resolver finds icons components from 'unplugin-icons' using this convenction:
* {prefix}-{collection}-{icon} e.g. <i-mdi-thumb-up />
*/
resolvers: [IconsResolver(), VuetifyResolver()]
resolvers: [
IconsResolver(),
Vuetify3Resolver(),
VueUseComponentsResolver()
]
}),
/**
* This plugin allows to use all icons from Iconify as vue components
* See: https://github.com/antfu/unplugin-icons
*/
Icons({
compiler: 'vue2'
compiler: 'vue3'
}),
VitePWA()
],
/**
* Import Vuetify SASS variables so they're available globally, even in scoped CSS
*/
css: {
preprocessorOptions: {
scss: {
additionalData: "\n@import 'vuetify/src/styles/styles.sass';\n"
}
}
},
resolve: {
alias: {
'@/': `${path.resolve(__dirname, './src')}/`,

1261
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff