feat(astrolabe): upgrade to Vue 3 and @nextcloud/vue 9

- Merge renovate/major-vue-monorepo: Vue 2.7.16 → 3.5.26
- Merge renovate/nextcloud-vue-9.x: @nextcloud/vue 8.29.2 → 9.3.1
- Update component imports to new @nextcloud/vue v9 paths
- Replace .sync modifiers with v-model:prop (Vue 3 syntax)
- Replace beforeDestroy with beforeUnmount lifecycle hook
- Remove Vue.() usage (automatic reactivity in Vue 3)
- Update main.js to use createApp() instead of Vue.extend()
- Add @vitejs/plugin-vue and configure Vite for Vue 3
- All builds passing, ready for admin UX improvements
This commit is contained in:
Chris Coutinho
2025-12-23 00:47:21 +01:00
parent 47095fabcd
commit d7c99fcc69
6 changed files with 74 additions and 27 deletions
+25
View File
@@ -24,6 +24,7 @@
"@nextcloud/eslint-config": "8.4.2",
"@nextcloud/stylelint-config": "3.1.1",
"@nextcloud/vite-config": "1.7.2",
"@vitejs/plugin-vue": "^6.0.3",
"terser": "5.44.1",
"vite": "7.2.7"
},
@@ -2249,6 +2250,13 @@
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.53",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
"integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@rollup/plugin-inject": {
"version": "5.0.5",
"dev": true,
@@ -3374,6 +3382,23 @@
],
"peer": true
},
"node_modules/@vitejs/plugin-vue": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
"integrity": "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@rolldown/pluginutils": "1.0.0-beta.53"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"peerDependencies": {
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
"vue": "^3.2.25"
}
},
"node_modules/@volar/language-core": {
"version": "2.4.27",
"dev": true,
+2 -1
View File
@@ -23,8 +23,8 @@
"@nextcloud/router": "^3.0.1",
"@nextcloud/vue": "^9.0.0",
"markdown-it": "^14.1.0",
"plotly.js-dist-min": "^2.35.3",
"pdfjs-dist": "^4.0.379",
"plotly.js-dist-min": "^2.35.3",
"vue": "^3.0.0",
"vue-material-design-icons": "^5.3.1"
},
@@ -33,6 +33,7 @@
"@nextcloud/eslint-config": "8.4.2",
"@nextcloud/stylelint-config": "3.1.1",
"@nextcloud/vite-config": "1.7.2",
"@vitejs/plugin-vue": "^6.0.3",
"terser": "5.44.1",
"vite": "7.2.7"
}
+16 -16
View File
@@ -48,7 +48,7 @@
<div class="mcp-search-card">
<div class="mcp-search-row">
<NcTextField
:value.sync="query"
v-model:value="query"
:label="t('astrolabe', 'Search query')"
:placeholder="t('astrolabe', 'Enter your search query...')"
class="mcp-search-input"
@@ -104,7 +104,7 @@
<div class="mcp-option-group">
<label>{{ t('astrolabe', 'Result Limit') }}</label>
<NcTextField
:value.sync="limit"
v-model:value="limit"
type="number"
:min="1"
:max="100" />
@@ -152,7 +152,7 @@
<div class="mcp-viz-header">
<h3>{{ t('astrolabe', 'Vector Space Visualization') }}</h3>
<NcCheckboxRadioSwitch
:checked.sync="showQueryPoint"
v-model:checked="showQueryPoint"
type="switch"
@update:checked="updatePlot">
{{ t('astrolabe', 'Show query point') }}
@@ -364,17 +364,17 @@
</template>
<script>
import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcContent from '@nextcloud/vue/components/NcContent'
import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import NcSelect from '@nextcloud/vue/components/NcSelect'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
import Magnify from 'vue-material-design-icons/Magnify.vue'
import ChartBox from 'vue-material-design-icons/ChartBox.vue'
@@ -505,7 +505,7 @@ export default {
// Check for URL parameters to open chunk viewer
this.handleUrlParameters()
},
beforeDestroy() {
beforeUnmount() {
// Clean up Plotly event handlers to prevent memory leaks
const plotDiv = document.getElementById('viz-plot')
if (plotDiv && plotDiv.on) {
@@ -648,7 +648,7 @@ export default {
},
toggleExcerpt(index) {
this.$set(this.expandedExcerpts, index, !this.expandedExcerpts[index])
this.expandedExcerpts[index] = !this.expandedExcerpts[index]
},
truncateExcerpt(text, maxLength = 150) {
+1 -1
View File
@@ -18,7 +18,7 @@
import * as pdfjsLib from 'pdfjs-dist'
import { generateUrl } from '@nextcloud/router'
import { translate as t } from '@nextcloud/l10n'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
export default {
+7 -4
View File
@@ -1,8 +1,11 @@
import Vue from 'vue'
import { createApp } from 'vue'
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
import App from './App.vue'
Vue.mixin({ methods: { t, n } })
const app = createApp(App)
const View = Vue.extend(App)
new View().$mount('#astrolabe')
// Add translation methods globally
app.config.globalProperties.t = t
app.config.globalProperties.n = n
app.mount('#astrolabe')
+23 -5
View File
@@ -1,7 +1,25 @@
import { createAppConfig } from '@nextcloud/vite-config'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default createAppConfig({
main: 'src/main.js',
adminSettings: 'src/adminSettings.js',
personalSettings: 'src/personalSettings.js',
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'js',
emptyOutDir: false,
rollupOptions: {
input: {
main: resolve(__dirname, 'src/main.js'),
'astrolabe-adminSettings': resolve(__dirname, 'src/adminSettings.js'),
'astrolabe-personalSettings': resolve(__dirname, 'src/personalSettings.js'),
},
output: {
entryFileNames: '[name].mjs',
chunkFileNames: '[name]-[hash].chunk.mjs',
assetFileNames: '[name][extname]',
},
},
sourcemap: true,
minify: 'terser',
},
})