Vue.JS SPA within Adonis.JS


#1

Any recommendation on how we can structure Vue.JS folders within Adonis.JS folder structure?

In the webpack boilerplate generated by VueJS-CLI, they have a src folder that contains all the Vue.JS logic.

How should we structure it for Adonis?

-Mickey


#2

I believe you should never mix your SPA and backend server together.

Use adonis to build the API server
And Vue project will just consume that API


#3

So if I get you correctly. I’ll use the vue-cli to create a web pack project and deploy vuejs server separately from the adonis.js backend server.

I saw that there is a doc for routing on SPA
https://adonisjs.com/docs/4.0/routing#_routing_for_spa_s

So I thought there is a way to implement both into the same project.


#4

Just keep dist of your vue project in adonis-app/public dir, but i recommend you to name your main vue html file differ from index.html: main.html would be ok. Then you register a route like this:

Route.any('*', ({response}) => response.download(Helpers.publicPath('main.html')))

Also, you should place all your adonis api methods above ‘*’ route.

I didn’t use vue, but i have an angular project, and i just build it to adonis app public dir. I also use different editor instances for both angular and adonis projects.


How to use Angular with Adonis
#5

This code gives me ‘Helpers is not defined’ error.

Please let us know where and how you define Helpers.


#6

You should put this line in top of your file:
const Helpers = use(‘Helpers’)


#7

Hi,
Can you help me in setting up vue with adonis? I’m new to it and don’t know how to do it, or any folder structure would be highly helpful or a little tutorial from you expert people…

-Ziyab Najeeb


#8

Hi. Please see my post above.


#9

Thanks for your support, I managed to to do it with laravel mix…


#10

Look at https://github.com/nuxt-community/adonuxt-template or https://github.com/pirmax/plasma-nuxt


#11

Thanks alot, it’s really helpful… Can you please tell me how this adonuxt or nuxt works?


#12

I wouldn’t recommend to use nuxt at once since nuxt isn’t equal to vue itself. The nuxt is quite different experience, it isn’t just stack of vue libs. So the question is: what do you need exectly with vue, what kind of application do you need with vue and adonis?


#13

Actually I’m working on a project that has 3 types of users: admin, employees and customers.
it’s basically is kind of sales ad services type of store, where customer gets register and make quotation and orders…

I was looking at laravel before but found adonisjs is most similar to laravel, but it will render views as server side, so I want my views in vue js as for front-end…

For that I need to setup a project with adonisjs + vuejs

In laravel there are presets so you can use vue out of the box. So I tried the very similar approach and with the help of laravel mix I’m able to manage vuejs in adonis js, however my question is that my client is having a hosting on 1and1.com. Will this be easily deployed on that hosting?


#14

Hi,

I think you should check out this tutorial, it would really help give some insights into how you can go about this.

Hope it was helpful.

Cheers


#15

A clearer tutorials if you have no clue about Nuxt is this:

Cheers