[Release] Modern Vue 3 + Vite Boilerplate for Nextcloud 33+

đź’» Development
, , ,
1

A modern, “batteries-included” boilerplate for developing Nextcloud apps using Vue 3 (Composition API), Vite, and PHP 8.3.

Designed for Nextcloud 33+. It implements the latest standards, including strict typing, the new Controller/API pattern, and database migrations.

Since the Skeleton App currently creates a Vue 2 variant and the tutorials are not really executable with the current 33.0.X version, I created this boilerplate.
I hope I have adhered to the general guidelines and please provide feedback so that we can create a good template for all newcomers and/or people who want to build apps with Vue3 and JavaScript.

Features:

  • Frontend: Vue 3 (Composition API), Vite 5+, and @nextcloud/vue components.

  • Build System: Configured to compile Assets directly into the app root (no complex symlinking required).

  • Backend: PHP 8.3 with strict types.

  • Database: Full example of the Entity → Mapper → Service → Controller pattern.

  • Migrations: Versioned database migrations (no legacy database.xml).

  • API: RESTful API implementation for frontend communication.

Here is the link to the Git template repository
Nextcloud Vue 3 Boilerplate

Happy New Year and Happy Coding

Carsten

2 Likes
2

Hello @cvorwerk and thank you for your work.

Can you integrate (by means of a PR) into the app template your work? Then, the app store can be updated to use your suggestions as boilerplate.

Cheers
Chris

1 Like
3

Hello @christianlupus,

first of all, Happy New Year. I think your idea isn’t bad, but currently the focus of app_template is on TypeScript. My boilerplate is intentionally on JavaScript. I’m not so sure whether that part should be integrated. But I’ll be happy to take a look at the rest.
Kind regards,

Carsten

4

Would you mind sharing what issues you ran into during the tutorials so that we can fix them? The tutorials have been updated a few weeks ago to support Vue 3 alongside Vue 2.

5

A quick feedback from me: I found it quite hard to follow the texts as Vue 2 and 3 are somewhat intermixed. As the code snippets are sort of lengthy, scrolling through the text is not so easy.
My suggestion was to split the Markdown files between Vue 2 and 3 and declare Vue2 as legacy/deprecated.

2 Likes
6

I couldn’t agree more. I started with the pure Vue 2 version and kept running into errors. I find the new version confusing, especially since the code isn’t really explained. Currently, the generator still generates a boilerplate for the old structure, which is more confusing than helpful.
However, I’m happy to look at the tutorials again and provide feedback. I can only agree that we need only one place where all the points come together.
I can only agree with @christianlupus point of view; I think a split between the “old way” and the “new way” would be simpler and clearer.

7

Good idea, I’ll split up the Vue 2 and 3 versions whenever I get around to it.

What specific errors are you running into, and what questions do you have about the code? We’re here to provide help if you need anything.

The app template in the app store is pinned to a specific commit and is currently updated manually, so it can take a while for it to catch up, and we apologize for that. As a reminder, you can also clone/fork the app template repository directly as an alternative. It has already migrated to Vue 3 while the app store’s template should be updated hopefully soon.

1 Like