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


#16

@adegbengaagoro

This is way much helpful… Thanks, however i have 1 issue, how to make seed? Like I have to add countries, credit card types… in laravel its given a seeder file, but im not getting in AdonisJs, and no tutorial or proper explination is there. At current im using the newer version of AdonisJs…

This is my code for Roles Seed:

const Factory = use(‘Factory’)
const Role = use(‘App/Models/Role’)

class RoleSeeder {
async run () {
const roles = await Role.table(‘roles’)
await roles.create({
name: ‘SuperAdmin’,
name: ‘Admin’,
name: ‘Customer’,
name: ‘Designer’,
name: ‘SalesPerson’,
})
}
}

module.exports = RoleSeeder


#17

I think you should have something like this

const Factory = use(‘Factory’)
const Role = use(‘App/Models/Role’)

class RoleSeeder {
  async run () {
    return await Role.createMany([
       { name: ‘SuperAdmin’ },
       { name: ‘Admin’ },
       { name: ‘Customer’ },
       { name: ‘Designer’ },
       { name: ‘SalesPerson’}
    ])
  }
}

module.exports = RoleSeeder