@nextcloud/vue

Vue components

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.

Documentation

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 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.

Install the library

npm i --save @nextcloud/vue

Usage

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 ci
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 (you need to re-link any time you do npm ci in the app)
4. Then build the app with: npm run build (or watch for changes with npm run watch)

Releasing a new version

1. Checkout latest master
2. Run npm version
3. Push the tag and the master branch
4. Make the tag a release on github and add the changelog (https://github.com/nextcloud/nextcloud-vue/releases)

Changelog

v2.6.1 (2020-08-27)

Full Changelog

Fixed bugs:

• Allow to toggle linkification by prop #1337 (raimund-schluessler)
• Fix sidebar layout in compact mode #1338 (raimund-schluessler)
• Update status icons #1341
• Do not fetch user-status if user prop does not represent a user #1348
• Allow to choose boundariesElement for actions popover #1351