You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dependabot-preview[bot] 88c062728f
Merge pull request #827 from nextcloud/dependabot/npm_and_yarn/node-sass-4.13.1
1 day ago
.github/workflows Create dependabot-approve.yml 2 weeks ago
docs fix package rename 2 months ago
src Merge pull request #818 from nextcloud/fix/sidebar/star-align 4 days ago
styleguide Add variable for breakpoint-mobile 1 month ago
.editorconfig Init component structure 1 year ago
.eslintrc.js Split 'AppNavigationItem' into small components 4 months ago
.gitignore Fix regenerator-runtime 1 month ago
.npmignore Init component structure 1 year ago
.stylelintignore Icon font 1 year ago
.stylelintrc.js Allow pausing ongoing modal slideshow 5 months ago
.travis.yml Fix travis, remove cache (#365) 8 months ago
LICENSE Copyright typo fix 1 year ago
Makefile clean generated fonts (#354) 9 months ago fix badge 2 months ago
babel.config.js Use babel env usage & corejs@3 1 month ago
package-lock.json Merge pull request #827 from nextcloud/dependabot/npm_and_yarn/node-sass-4.13.1 1 day ago
package.json 1.2.6 4 days ago
styleguide.config.js Add MultiselectTags component 2 months ago
webpack.common.js Fix icon font generation 1 month ago Fix a webpack devtool that works without unsave-eval CSP 1 year ago Webpack conf style fix 1 year ago

Vue components

npm last version travis build status Dependabot status Codacy Badge Code coverage irc

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.

Getting started

App example

If you want to check a real live example of a nextcloud app that uses this library, you can head over to We will try to maintain this repository the best we can, but some example might be obsolete. Always check this repository documentation.

Install the library

npm i --save @nextcloud/vue


To use a component, just import it:

import { AppNavigation } from '@nextcloud/vue'

Depending on which components you use, you might want to only import individual (separately bundled) components:

import Avatar from '@nextcloud/vue/dist/Components/Avatar'

Development setup

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:

  1. Install the dependencies with npm i
  2. Build the components every time you do changes: npm run build
  3. Connect it to your local Nextcloud development setup:
    • In this repository do npm link
    • In the repository of an app do npm link @nextcloud/vue

The link is going to be broken every time you do npm i in the app you linked it to, so then you will have to re-link.