Is it possible to use the HMR enabler in Vite based projects?
Useing the app itself is unreleated to the packer used.
However, the HMR support of vite works a bit different to the one of Webpack. I tried it yesterday and failed so far: Vite does not create anything in js folder that would allow the browser to know the location of the Vite/Webpack server to query for updates. You might be able to use a reverse proxy to map that in some way but I did not find a way to do so.
Honestly, Vite’s main focus is a bit different from the one used in Nextcloud, and this makes it somewhat complicated to use (in my personal experience).
Just my 50ct. If someone has it running, I am open to be corrected.
Alright, aside from HMR, which bundler and which Vue version are you Nextcloud people using yourself nowadays when developing new NC apps. IIRC I saw a post where Vite was mentioned as the recommended bundler nowadays, I guess in combination with Vue 3? Are there any plans to update the official tutorials to reflect this?
Well… about Webpack vs Vite, I had a discussion with one person from NC and the answer is not trivial. Both have their individual benefits and drawbacks. There is no hard connection between Vue and the bundler in place.
One has to understand that Vite is the new guy in the block and many people want to give it a try. This led to the effect that the Vite nextcloud configuration is much more modern and advanced than the webpack configuration provided by nextcloud.
About Vue version: Some apps have already been ported to Vue3 many (especially community) are running on Vue2. Migration is undergoing and will probably hit in the next major release I guess. It is less a question about new apps but about migration, though. The number of new apps is rather small compared to the total number of apps.
Personally as maintainer of Cookbook, I use Vue2 and consider migrate from Webpack to Vite but I am not finally decided on that. After some issues have been resolved and PRs merged, the plan is to migrate to Vue3.
Hi Christian, is there any documentaion on how to migrate app skeleton to go from vue 2 to vue 3 (and seems to imply also going from webpack to vite).
I’m in the process of developing brand new App and it doesn’t make sens to develop it with vue 2, that is already EOL. Learning curve to vue 2 to later upgrade to vue 3. Very few component library still using vue2.
Hey.
I am unsure if there is any documentation. In fact the migration to Vue 3 can be called slow at best. Vue 2 is EOL quite some time now and the NC libraries are not yet compatible with Vue3 since very long or at all.
I suppose, it would be best to create a new app (using Vue2) and directly migrate to Vue3 (before implementing your own code). If you manage to get this running, it might be worth filing a PR on the app template.
Chris
1 Like
The app generator currently gives you this:
{
"name": "foo",
"version": "1.0.0",
"license": "AGPL-3.0-or-later",
"engines": {
"node": "^20.0.0",
"npm": "^10.0.0"
},
"scripts": {
"build": "NODE_ENV=production webpack --config webpack.js --progress",
"dev": "NODE_ENV=development webpack --config webpack.js --progress",
"watch": "NODE_ENV=development webpack --config webpack.js --progress --watch",
"lint": "eslint src",
"stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css"
},
"browserslist": ["extends @nextcloud/browserslist-config"],
"dependencies": {
"@nextcloud/vue": "^8.11.2",
"vue": "^2.7.16"
},
"devDependencies": {
"@nextcloud/browserslist-config": "^3.0.1",
"@nextcloud/eslint-config": "^8.3.0",
"@nextcloud/stylelint-config": "^2.4.0",
"@nextcloud/webpack-vue-config": "^6.0.1",
"eslint-webpack-plugin": "^4.1.0",
"stylelint-webpack-plugin": "^5.0.0"
}
}
Remove Webpack packages and (Nextcloud) Vue 2 packages
npm uninstall @nextcloud/webpack-vue-config eslint-webpack-plugin stylelint-webpack-plugin @nextcloud/vue vue
Install Vue 3
npm install vue
Install the current v9 alpha of the Nextcloud Vue components library
Version 9 of the library, which as of today is alpha 7, does support Vue3
npm install vue @nextcloud/vue@9.0.0-alpha.7
Install Vite (v5)
The current Vite version is v6, but we had some incompatibility with that version, maybe due to an other Nextcloud package, I can’t remember, that’s why we had to install Vite v5. But you could try v6 until an issue arises.
npm install --save-dev vite@5
Install Nextclouds Vite config
You have to explicity install version 2 of the Nextcloud Vite config package, as by default it wants to install version 1, which is for Vue 2.
npm install --save-dev @nextcloud/vite-config@2
TypeScript (optional)
Packages to install
npm install --save-dev typescript @vue/tsconfig
Configure tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.json",
"include": ["./src/**/*.ts", "./src/**/*.vue"],
"compilerOptions": {
"outDir": "./js/"
}
}
Update all packages
npm update --save
Adjust the type and scripts in package.json
{
...
"type": "module",
"scripts": {
"build": "vite --mode production build",
"dev": "vite --mode development build",
"watch": "vite --mode development build --watch",
...
},
...
}
Set up your vite.config.js
Adjust eslint
Rename the file from .eslintrc.js to .eslintrc.cjs and put this content into the file
module.exports = {
extends: [
'@nextcloud/eslint-config/vue3',
],
}
Adjust stylelint
Rename the file from stylelint.config.js to stylelint.config.cjs and put this content into the file
const stylelintConfig = require('@nextcloud/stylelint-config')
module.exports = stylelintConfig
2 Likes
I will definitily. I’m even working on a new set of Tutorial Apps using a different approach.
Starting from the blank App skeleton generated (which can run as it is with empty content). And adding step by step components one by one on client side and server side. This shall make it easier for newbee like me to get their feet into NextCloud dev development.
Also highlighting more the difference between creating an App to fit into NextCloud community and a more personal App. Like I totally understand the purpose of StyleLint in a community development. But it can be relaxed when it comes to personnal development.
1 Like
Thank you so much Claw8030 (whetever is your first name 
). That is exactly what I was looking for. I give it a try as soon as possible.
But for now some suffering people are waiting my magice hands. IT isn’t my main job.
UPDATE:
After making all required updates, I run:
npm run dev
And I get 1 warning and 1 error
Warning - linked to tsconfig.json
▲ [WARNING] Cannot find base config file "@vue/tsconfig/tsconfig.json" [tsconfig.json]
tsconfig.json:2:13:
2 │ "extends": "@vue/tsconfig/tsconfig.json",
Error linked to vite.config.js
✘ [ERROR] Failed to resolve "@nextcloud/vite-config". This package is ESM only but it was tried to load by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]
node_modules/vite/node_modules/esbuild/lib/main.js:1227:27:
1227 │ let result = await callback({
╵ ^
at file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:54549:27
at requestCallbacks.on-resolve (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:1227:28)
at handleRequest (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:648:17)
at handleIncomingPacket (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:673:7)
at Socket.readFromStdout (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:601:7)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:561:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:512:3)
at Readable.push (node:internal/streams/readable:392:5)
at Pipe.onStreamRead (node:internal/stream_base_commons:189:23)
This error came from the "onResolve" callback registered here:
node_modules/vite/node_modules/esbuild/lib/main.js:1151:20:
1151 │ let promise = setup({
╵ ^
at setup (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:54524:18)
at handlePlugins (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:1151:21)
at buildOrContextImpl (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:874:5)
at Object.buildOrContext (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:700:5)
at /var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:2030:15
at new Promise (<anonymous>)
at Object.build (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:2029:25)
at build (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:1880:51)
at bundleConfigFile (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:54476:24)
The plugin "externalize-deps" was triggered by this import
vite.config.js:1:312:
1 │ ...apps/osmsurgery/vite.config.js";const __vite_injected_original_import_meta_url = "file:///var/www/nextcloud/apps/osmsurgery/vite.config.js";import { createAppConfig } from '@nextcloud/vite-config'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
failed to load config from /var/www/nextcloud/apps/osmsurgery/vite.config.js
error during build:
Error: Build failed with 1 error:
node_modules/vite/node_modules/esbuild/lib/main.js:1227:27: ERROR: [plugin: externalize-deps] Failed to resolve "@nextcloud/vite-config". This package is ESM only but it was tried to load by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
at failureErrorWithLog (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:1477:15)
at /var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:946:25
at runOnEndCallbacks (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:1317:45)
at buildResponseToResult (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:944:7)
at /var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:971:16
at responseCallbacks.<computed> (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:623:9)
at handleIncomingPacket (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:678:12)
at Socket.readFromStdout (/var/www/nextcloud/apps/osmsurgery/node_modules/vite/node_modules/esbuild/lib/main.js:601:7)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:561:12)
I guess if I want to use external component library (like primeVue), it shall be declared in vite.config.js
import { createLibConfig } from '@nextcloud/vite-config'
const translations = //...
export default createLibConfig({
index: 'src/index.js',
}, {
replace: {
TRANSLATIONS: translations,
},
})
Did you forget to run npm install --save-dev @vue/tsconfig?
Did you put "type": "module" into your package.json?
However, if you don’t mind, just take this repo as a reference.
1 Like
Again great help. We are almost there, the 2 recommendation fixed both the warning and error.
Now I get:
> osmsurgery@1.0.0 dev
> vite --mode development build
Building osmsurgery for development
(!) build.outDir must not be the same directory of root or a parent directory of root as this could cause Vite to overwriting source files with build outputs.
vite v6.2.1 building for development...
✓ 1 modules transformed.
✗ Build failed in 44ms
error during build:
Could not resolve entry module "src/settings.js".
at getRollupError (file:///var/www/nextcloud/apps/osmsurgery/node_modules/rollup/dist/es/shared/parseAst.js:397:41)
at error (file:///var/www/nextcloud/apps/osmsurgery/node_modules/rollup/dist/es/shared/parseAst.js:393:42)
at ModuleLoader.loadEntryModule (file:///var/www/nextcloud/apps/osmsurgery/node_modules/rollup/dist/es/shared/node-entry.js:21188:20)
at async Promise.all (index 1)
Currently build.outdir is only defined in tsconfig.json:
{
"extends": "@vue/tsconfig/tsconfig.json",
"include": ["./src/**/*.ts", "./src/**/*.vue"],
"compilerOptions": {
"outDir": "./js/"
}
}
But seems it’s not use with Vite and shall be move to vite.config.js
For the last part, I noticed this setting.js in under src in directory tree. But it’s not part of skeleton and I don’t know what it should contain.
You can ignore the build.outDir warning.
Regarding the error: remove the line that says settings: 'src/settings.js', from your vite.config.js, as you don’t need that if your app doesn’t have a settings page.
Just a heads up: the Nextcloud dev documentation is sometimes frustrating because from now and then you encounter situations where there is a lack of information that would certainly be helpful. But keep in mind that this is an open source project, so it is no ones obligation to provide a perfect documentation. It often comes down to check other Nextcloud apps how they do things and you have to dive into the source code itself, especially on the PHP side of things. So keep that in mind.
1 Like
Thanks @Claw8030 , I shall admit that it’s quite a frustrating process sometimes. I can imagine many developer who were interested in building Apps in NextCloud environment gave up.
But being open source also has a strength, the community is very helpful. At that his the spirit of Open Source. Without such spirit, people could consider I shall just spend some months reading and understanding all literacy about Node.js, Vue, Vite, StyleLint, … and have the level to solve problems myself.
The advantage of open source community is we don’t spend our time re-inventing the wheel. We can benefit of other experience to bring new features into the project.
And to be honest, I use a lot of different technologies in our project, some not being open source. And it’s very common to need to read through tenth of website and blogs before to finally get the answer to a problem.
1 Like
And one more error:
> osmsurgery@1.0.0 dev
> vite --mode development build
Building osmsurgery for development
(!) build.outDir must not be the same directory of root or a parent directory of root as this could cause Vite to overwriting source files with build outputs.
vite v6.2.1 building for development...
✓ 3 modules transformed.
✗ Build failed in 66ms
error during build:
[commonjs--resolver] Missing "./dist/Components/NcAppContent.js" specifier in "@nextcloud/vue" package
at e (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:15558:25)
at n (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:15558:631)
at o (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:15558:1293)
at resolveExportsOrImports (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:19568:18)
at resolveDeepImport (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:19581:25)
at tryNodeResolve (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:19411:18)
at Object.resolveId (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:19184:19)
at Object.handler (file:///var/www/nextcloud/apps/osmsurgery/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:51698:15)
at file:///var/www/nextcloud/apps/osmsurgery/node_modules/rollup/dist/es/shared/node-entry.js:21891:40
at async PluginDriver.hookFirstAndGetPlugin (file:///var/www/nextcloud/apps/osmsurgery/node_modules/rollup/dist/es/shared/node-entry.js:21791:28)
My App.vue is:
<template>
<NcAppContent>
<template id="osmsurgery">
<div>
<h1>Surgery Report</h1>
</div>
</template>
</NcAppContent>
</template>
<script>
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
export default {
name: 'App',
components: {
NcAppContent,
},
data() {
return {
products: [
{ id: 1, name: 'Product 1' },
{ id: 2, name: 'Product 2' },
{ id: 3, name: 'Product 3' },
{ id: 4, name: 'Product 4' },
{ id: 5, name: 'Product 5' },
],
}
},
}
</script>
<style scoped lang="scss">
#osmsurgery {
display: flex;
justify-content: center;
margin: 16px;
}
</style>
And there is a change component hierarchy has change for Vue3. I will do some research.
As of @nextcloud/vue@9.0.0-alpha.7, this should be
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
It may be possible that you need to add the .js extension when using plain JavaScript, I don’t know.
When you visit the Nextcloud Vue Style Guide you need to make sure that you are always looking at the v9 docs, as the import paths changed recently
Please look at the demo repo I mentioned above. I don’t think it is a good idea if you keep posting every error you encounter here. I don’t want to be rude, but I am not planning to become your personal guide on how to set everything up. 
1 Like
@Claw8030 Thanks a lot all fixed.
Sorry I missed the reference to the mentioned repo. It’s bookmarked now.