index.md

🖼️ Nextcloud UI Kit for building Nextcloud apps with Vue

• ✨ Standardized UI Components
• 🛠️ Composables and frontend utilities
• 🔗 Reference providers utilities

📄 Documentation

Version	Target	Documentation
v9.x [next]	Nextcloud 30+ (Vue 3)	https://next--nextcloud-vue-components.netlify.app
v8.x [master]	Nextcloud 28+ (Vue 2)	https://nextcloud-vue-components.netlify.app
v7.x [stable7]	Nextcloud 25 - 27	https://stable7--nextcloud-vue-components.netlify.app
v6.x [stable6]	Nextcloud 24 - 25	https://stable6--nextcloud-vue-components.netlify.app

📦 Install

npm i @nextcloud/vue

🚀 Usage

Import corresponding components and other modules on use. Check the documentation for more details.

import NcButton from '@nextcloud/vue/components/NcButton'
import { useHotKey } from '@nextcloud/vue/composables/useHotKey'

// (Deprecated) Old import path 
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'

Import from a single root is available as well. Use with caution: this might lead to slower build time and larger bundles in some cases.

import { NcButton, useHotKey } from '@nextcloud/vue'

(Deprecated) Registering all components

NextcloudVuePlugin registers all the components and directives globally.

⚠️ This installation method leads to extremely large bundle and removed in v9.
If you don't want to import component on usage you may use unplugin-vue-components instead.

import Vue from 'vue'
import { NextcloudVuePlugin } from '@nextcloud/vue'

Vue.use(NextcloudVuePlugin)