Vue & Neo4j

[adam_cowley]

For those of you using Neo4j with VueJS, I have built a lightweight plugin that will allow you to connect directly to a Neo4j instance from within Vue components. Once connected, you can create sessions and run queries with the underlying official Neo4j/Javascript driver.

I've also added an API for Neo4j Desktop applications so you can quickly connect to the current active database.

GitHub

adam-cowley/vue-neo4j

Neo4j connector for Vue.js. Contribute to adam-cowley/vue-neo4j development by creating an account on GitHub.

[michaelrburak]

Hi! Thank you so much for this awesome plugin! I've been enjoying the rapid development Vue.js + Neo4j provides a great deal. However, I'm not sure what my hosting options are and how to go about them, as my app is now mature enough to go live. Any suggestions? I'm partial to Heroku myself but can't seem to get the environment variables to work with the plugin.

[adam_cowley]

Hey Michael,

That's a good question. You could deploy neo4j on premise or your favourite cloud provider (you can download the Server version of Neo4j from the Download page or there are images for AWS/Google Cloud etc), or you could do a one-click installation and pay as you go using Neo4j Aura. How will your app be used?

[michaelrburak]

For now, it's a hobbyist project on a small scale to learn Neo4j and Vue.js together, probably with Flask at some point too, and hopefully develop into a bigger app in the future. I'm looking to get it hosted online in order to make sure nothing is horribly compromised for future production and to be able to have a few people use it. I mostly ran into configuration issues on heroku with their neo4j add on due to I think not really understanding how to modify what is passed into this.$neo4j.connect() outside of the use case of the local installation connected to Neo4j Desktop I have running.

What would you suggest for someone looking for a low cost to free option running small scale(which is why I was looking into Heroku, the add on has a free tier) and any advice on passing the proper values into connect()?

[niclasko]

I’m a big fan of Vue.js. Especially its simplicity as compared to Angular.js and React.

Thanks for creating this so we can combine two great technologies (Vue.js & Neo4j)

[adam_cowley]

In that case I'd go for Neo4j Aura - all you need to do is enter some billing information, click a button and you get a neo4j instance with a url, username and password that you could use in this.$neo4j.connect() for now.

Long term a Flask API is a good way to go. The problem with connecting to neo4j from a front end application is that your database is completely public and you need to store credentials where they can be easily found (and therefore makes your app vulnerable). Putting an API layer between the application and neo4j protects you from that.

There's an example python/flask repo here that I put together a couple of years ago. It should be enough to get you going.

[babacarcissedia]

you're absolutely right! that's what I was about to say. Connecting to the database on the front-end can be very dangerous for hackers like myself even if you hide your db credentials with .env files

[babacarcissedia]

I am having the same problem now with heroku as staging environment. Did you find any production ready solution for neo4j database hosting apart from graphendb ?

[advaitvarma8]

Hi Adam,
I'm new to Vue.js. I tried to use your plugin to connect to a neo4j database on my local machine following the steps on your github readme file, but I wasn't able to get it to work. When i click on connect, nothing happens. Could you help me out

[adam_cowley]

How have you implemented the code? Do you have any errors in the console? What version of vue-neo4j and neo4j are you using? Is there a repo anywhere online?

[advaitvarma8]

• Vue-neo4j version : 0.4.0
• Neo4j version: 1.2.7
• There are no errors in the console,when I click connect, nothing happens
• I have followed the steps put out in the README.md file
• I also imported the plugin in main.js file of my project

Connect

.echarts { width: 100%; height: 100%; }

[adam_cowley]

Can you share your code please? There's no way I can help diagnose your issue with the information that you have provided.

[muaazmehmood]

Can you please guide how to use it with vue3 vite app ? I am getting this error

Cannot set property '$neo4j' of undefined
at Object.install (vue-neo4j.js:11752)
at Object.use (runtime-dom.esm-bundler-9421f267.js:4502)
at main.js:7

[adam_cowley]

Hey @muaazmehmood, I've not got this working with Vue 3 yet. I'm anticipating a rewrite which will expose the methods via the composition API.

How are you using the plugin?

[muaazmehmood]

thanks for reply i am not using this plugin i am using node js driver .

[FalcoLiu]

how to start your project?

[haakon_eriksen]

Hi, @adam.cowley! I have been using Neo4j for some time, and have recently started using Vue, and found your plugin. Do I need to install any other neo4j modules than yours?

I get

error 'driver' is defined but never used no-unused-vars

when I copy-paste the example on Github into App.vue and add the plugin in main.js.

Cheers,
Haakon