hydrusrvue is a Vue-based frontend for hydrusrv that makes use of its entire feature set, allowing you to access your media managed with hydrus server on the web. It is largely built with Bulma and optimized for all common desktop and mobile screen sizes.

The most prominent features are:

  • Comprehensive options to search and sort your files and tags
  • A gallery mode in the files search page that allows you to comfortably view your files in a lightbox without navigating to the detail page
  • Direct support for common image and video formats on the web; non-supported files can be downloaded and viewed locally
  • Built-in user registration and actions like changing username or password or deleting the user altogether
  • The ability to define options like tag colors and default sorting methods on a per-client basis, allowing you to have different settings in each browser
  • Fast delivery due to lazy loading routes
  • Enhanced performance on modern browsers thanks to Vue CLI's modern mode
  • Basic web app features that allow you to add hydrusrvue to the home screen of your smart device and use it just like a native app
  • Experimental Electron support that allows you to built a hydrusrvue desktop app for any major platform


The easiest way to install is via cloning this repository:

user@local:~$ git clone https://github.com/mserajnik/hydrusrvue.git
user@local:~$ cd hydrusrvue
user@local:hydrusrvue$ yarn


If you have installed via cloning the repository, you can update via Git:

user@local:hydrusrvue$ git pull
user@local:hydrusrvue$ yarn

Always make sure to run yarn after updating to install any packages you might
be missing.

hydrusrvue follows Semantic Versioning and any breaking
changes that require additional attention will be released under a new major
version (e.g., 2.0.0). Minor version updates (e.g., 1.1.0 or 1.2.0) are
therefore always safe to simply install via the routine mentioned before.

When necessary, this section will be expanded with upgrade guides to new major



Duplicate .env.example as .env. Make use of the following options to
configure your installation:

  • VUE_APP_TITLE=hydrusrvue: sets the title of your installation. It is used
    throughout the whole application, making it possible to add some personal
  • VUE_APP_DESCRIPTION=A Vue-based frontend for hydrusrv: sets the content
    of <meta name="description">. Be advised that hydrusrvue is not opmitized
    for search engines and that they might decide to ignore the description even
    if provided.
  • VUE_APP_ROBOTS=noindex, nofollow: sets the content of
    <meta name="robots">.
  • VUE_APP_API_URL=https://example.com/api: the URL to your hydrusrv
    API. No trailing slashes.
  • VUE_APP_REGISTRATION_ENABLED=true: setting this to false disables the
    registration page. This does not disable the registration in your hydrusrv
    installation; to achieve this, use the appropriate hydrusrv setting.
  • VUE_APP_AUTHENTICATION_REQUIRED=true: setting this to false allows the
    access of all views aside the user view without logging in. This only affects
    the frontend and must mirror the setting in hydrusrv for it to work correctly
    and without creating user experience issues.
  • VUE_APP_MIN_PASSWORD_LENGTH=16: sets the minimum password length when
    registering or updating the password. Providing a higher value than 1024
    will discard the value and use 1024 as the minimum length instead. This
    is only used for frontend validation and should mirror the setting in
    hydrusrv for the best user experience.
  • VUE_APP_FALLBACK_FILES_SORTING_NAMESPACE=namespace: sets the fallback
    sorting namespace that is needed to not break namespace sorting. Should be
    set to something sensible like creator or series, depending on your
  • VUE_APP_DEFAULT_NAMESPACE_COLORS='character#00b401|creator#bb1800|meta#000000|person#008f00|series#bb2cb9|studio#941100':
    sets default colors for the given namespaces. The user will not be able to
    change those colors in his settings until tags under the configured
    namespaces exist. Once such tags are added to hydrusrv, the user will see the
    default colors and be able to override them.
  • VUE_APP_FALLBACK_TAG_COLOR='#0088fb': sets the fallback color for
    non-namespaced tags (if not overriden by the user).


user@local:hydrusrvue$ yarn serve


user@local:hydrusrvue$ yarn build


After running yarn build, copy the content from dist to any webspace.


Disclaimer: Electron support is experimental, untested on most platforms
and might contain application-breaking bugs.


user@local:hydrusrvue$ yarn serve:electron


user@local:hydrusrvue$ yarn build:electron

This creates a build for your current platform. You can find the built
application in dist_electron. Take a look at the
electron-builder CLI parameters (the Building
section) to learn how to built for other platforms. You can just attach the
parameter to the yarn build:electron command. E.g., to build for Windows x64:

user@local:hydrusrvue$ yarn build:electron --win --x64