Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-neo4j with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. require("vue-loader/package.json"); // vue-loader is a peer dependency. require("vue-template-compiler/package.json"); // vue-template-compiler is a peer dependency. require("neo4j-driver/package.json"); // neo4j-driver is a peer dependency. var vueNeo4j = require("vue-neo4j")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-neo4j v0.4.5

Neo4j connector for Vue


A Vue.js plugin that allows you to connect directly to Neo4j inside the browser using the bolt protocol.


vue-neo4j can be installed via npm.

npm install --save vue-neo4j

Once installed, Import or require the plugin into your project and use Vue.use to register the plugin.

import Vue from 'Vue'
import VueNeo4j from 'vue-neo4j'



Once installed, a $neo4j property will be added to all Vue components.

    <input v-model="protocol">
    <input v-model="host">
    <input v-model="port">
    <input v-model="username">
    <input v-model="password">
    <button @click="connect()">Connect</button>

export default {
    name: 'MyComponent',
    data() {
        return {
            protocol: 'bolt',
            host: 'localhost',
            port: 7687,
            username: 'neo4j',
            password: 'trustno1'
    methods: {
        connect() {
            return this.$neo4j.connect(this.protocol,, this.port, this.username, this.password)
                .then(driver => {
                    // Update the context of your app
        driver() {
            // Get a driver instance
            return this.$neo4j.getDriver()
        testQuery() {
            // Get a session from the driver
            const session = this.$neo4j.getSession()

            // Or you can just call this.$, params)
  'MATCH (n) RETURN count(n) AS count')
                .then(res => {
                .then(() => {


StringprotocolConnection protocol. Supports bolt or bolt+routing
StringhostHostname of Neo4j instance
NumberportNeo4j Port Number (7876)
StringusernameNeo4j Username
StringpasswordNeo4j Password
BooleanencryptedForce an encrypted connection?

Returns a Promise. Resolves to an instance of the Neo4j driver.


Returns the last connected driver instance. This method will throw an error if no connection has been made.


Returns the new session from the driver. This method will throw an error if no connection has been made. Options is an optional object containing options for the session, for example the database or default access mode.


Sets the default database that will be used if a database hasn't been supplied.


Returns the name of the default database chosen at connection.

this.$, params, options)

Creates a new session in the current driver, runs the query, closes the session and returns the Neo4j result object in one go. Options is an optional object containing options for the session, for example the database or default access mode.

    name: 'Profile',
    data() {
        return {
            username: 'adam',
            user: false
    methods: {
        getUser() {
            const query = 'MATCH (u:User { username: $username }) RETURN u LIMIT 1'
            const params = { username: this.username };

            this.$, params, {database: 'foo'})
                .then(res => {
                    const user = res.records[0].get('u');
                    this.user = user;

Neo4j Desktop

This plugin contains some handy functions for integrating with Neo4j Desktop. The this.$neo4j.desktop provides helpers for getting the context, active graph configuration/credentials and a function to connect directly to the active graph.

  • connectToActiveGraph
  • executeJava
  • getActiveBoltCredentials
  • getActiveGraph
  • getContext
  • getGraphQLClient


Connect to the active graph started in Desktop.

    .then(driver => {

Connect Form Component

The Connect component will pull all projects and graphs from the Desktop context and allow. you to choose which project and graph to connect to. The onConnect and onConnectError functions will be trigged on successful connection or when a connection error is thrown. This will allow you to set the current state. The showActive button allows you to show or hide the 'Active', which when clicked will search for an active graph and attempt to connect.

The form elements are styled with Bootstrap classes. You can target the elements within the form by using the .vue-neo4j.connect class which is applied to the parent.

        :showActive="true" />

export default {
    name: 'MyComponent',
    methods: {
        myOnConnect(driver) {
        myOnConnectError(error) {

.vue-neo4j.connect {
    background: blue;

Component Props

onConnectFunctionCallback function for when a driver connection has been made() => {}
onConnectErrorFunctionCallback function for when there is a problem connecting with the supplied credentialse => console.error(e)
showActiveBooleanShow a button to connect to the current active graph?true
showProjectsBooleanShow the list of projects rather than a form with host, port, username etc.true
showDatabaseBooleanShow an input for the default database to instantiate the driver withtrue
protocolStringThe default protocol to display in the connect form'neo4j'
hostStringThe default host to display in the connect form'localhost'
port[Number, String]The default port to display in the connect form7687
databaseStringThe default database to display in the connect form''
usernameStringThe default username to display in the connect form'neo4j'
passwordStringThe default password to display in the connect form''

Database Information

The Neo4jDatabaseInformation component will take the information from the driver and display it in a UI component. It will also supply a dropdown of values that when clicked will change the default database for queries.

    openIcon="angle up"
    closeIcon="angle down"

Component Props

allowChangeToSystemBooleanAllow the user to switch to the system databasefalse
onDatabaseChangeFunctionFunction that is called when the user changes the database() => {}
openIconStringIcon from Semantic UI to display when the database list is closedangle up
closeIconStringIcon from semantic UI to display when the database list is openangle down
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free