New tutorial: creating a dashboard widget with Vue.js

💻 Development
1

Hello Nextclouders,

There is a new tutorial live: the 4th tutorial of our developer programme series is an introduction to using Vue.js and creating dashboard widgets!

First, we show you how to create a dashboard widget with normal Javascript, without Vue.js, to show you how dashboard widgets work.

Then, we show you how to create a second dashboard widget using Vue.js components.

The tutorial also repeats some of the steps that were introduced in the previous tutorials about the app architecture to make everything easier to digest. There is also a high-level introduction to adding translations to your app.

The tutorial may or may not feature cat GIFs again :kissing_cat:.

Screenshot:

image
image1024×586 33.2 KB

You can find this tutorial (and all the previous tutorials) here:

Nextcloud app development tutorials

We hope this will be useful!

All the best!

1 Like
2

I’m stuck with the vue tutorial.
Always getting a runtime error:

index.mjs:1348 Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading ‘styles’)

I’ve searched 2 hours with stack overflow, Copilot, Cline, changed the packages many times. No luck.
There seem to be incompatibilities between vue and the vue-loader.
Does anybody have a working solution?
the tutorial comes with vue 2.7.16 and no vue-loader listed in package.json.

This should be a solution, but also doesn’t work:
“vue”: “^2.7.10”,
“vue-router”: “^3.6.5”,
“vuex”: “^3.6.2”,
“vue-loader”: “15.10.0”,
“vue-style-loader”: “4.1.3”

I’m out of ideas.

3

Are you using the latest version of the app template from GitHub, or did you generate a new app from the app store? The template in the app store is currently an older version that included vue-loader as a dependency in package-lock.json, but the latest version doesn’t have it anymore. If you generated the app from the app store before, could you try again by cloning the app template from GitHub instead (or vice versa) and see if that helps?