@nextcloud/vue
Advanced tools
This repo contains the various Vue.js components that Nextcloud uses for its internal design and structure. It provides standardized UI elements for building Nextcloud app frontends with Vue.js.
A list of available components with examples to try out is available in the documentation.
The documentation is built from the latest development branch, for stable releases the documentation can be found matching the latest minor version:
If you want to check a real live example of a nextcloud app that uses this library, you can head over to https://github.com/skjnldsv/vueexample/ We will try to maintain this repository the best we can, but some example might be obsolete. Always check this repository documentation.
npm i --save @nextcloud/vue
To use a component, just import it:
import { NcAppNavigation, NcActions, NcActionButton } from '@nextcloud/vue'
Be careful, this will registry all components and directives, even the ones not being used.
import Vue from 'vue'
import { NextcloudVuePlugin } from '@nextcloud/vue'
Vue.use(NextcloudVuePlugin)
If you want to work on improving the components it’s best to run the latest code and link it to your local Nextcloud installation:
npm cinpm run build or npm run build:module (for es modules)
npm run watch or npm run watch:modulenpm linknpm link @nextcloud/vue (you need to re-link any time you do npm ci in the app)npm run build (or watch for changes with npm run watch)This library uses translated strings.
When you edit/create a translated string, you need to run npm run l10n:extract to update the source files.
Our awesome translation community will then be notified and a bot will sync those changes automatically.
Nonetheless, it requires a bit of caution.
When you implement a translated string, import the translate or translatePlural and add it in your methods like so:
<template>
<element>
{{ t('Choose') }}
</element>
</template>
<script>
import { translate as t } from '@nextcloud/l10n'
export default {
methods: {
t,
},
}
</script>
Please note that using a translated string as an attribute will NOT work. But it will work if it's within an element (like the example above)
<template>
<element :prop="t('This will not work')" />
</template>
You will instead have to define the string in the data section and use the relevant variable reference.
<template>
<element :prop="chooseProp" />
</template>
<script>
export default {
data() {
return {
chooseProp: t('Choose'),
},
}
}
</script>
When developing new components or extending components, make sure to also have some bits of related documentation like examples, where applicable.
To test components and the documentation in that context, you can run npm run styleguide to run a local server that serves the style guide
with all the components.
If you want to use vue-devtools in Firefox, you need to:
diff --git a/lib/public/AppFramework/Http/ContentSecurityPolicy.php b/lib/public/AppFramework/Http/ContentSecurityPolicy.php
index 0e3a6a705d..416b8b0fb9 100644
--- a/lib/public/AppFramework/Http/ContentSecurityPolicy.php
+++ b/lib/public/AppFramework/Http/ContentSecurityPolicy.php
@@ -41,9 +41,9 @@ namespace OCP\AppFramework\Http;
*/
class ContentSecurityPolicy extends EmptyContentSecurityPolicy {
/** @var bool Whether inline JS snippets are allowed */
- protected $inlineScriptAllowed = false;
+ protected $inlineScriptAllowed = true;
/** @var bool Whether eval in JS scripts is allowed */
- protected $evalScriptAllowed = false;
+ protected $evalScriptAllowed = true;
/** @var bool Whether strict-dynamic should be set */
protected $strictDynamicAllowed = false;
/** @var array Domains from which scripts can get loaded */
master or stableXv4.0.1): git checkout -b v<version>npm version patch --no-git-tag-version (npm version minor --no-git-tag-version if minor).
This will return a new version name, make sure it matches what you expectgenerate then paste the content to the CHANGELOG.md file
v4.0.1)
A pre-release can be built in the same way as described above, however it requires manual adjustments to avoid that npm ships the pre-release to all users:
Retag latest to the last stable release
npm dist-tag add @nextcloud/vue@5.4.0 latest
Tag the new pre-release as next
npm dist-tag add @nextcloud/vue@6.0.0-beta.2 next
v8.7.0 (2024-02-20)
required attribute for native form validation by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5225disabled state to native button element by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5237useResizeObserver by @max-nextcloud in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5240FAQs
Nextcloud vue components
The npm package @nextcloud/vue receives a total of 5,279 weekly downloads. As such, @nextcloud/vue popularity was classified as popular.
We found that @nextcloud/vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.