Vue.js widget with routes hosted in child url

Yay!

I have my first real world webapp up and running, made with vue.js!

This is a very simple wordpress message viewer (list / single), to embed in any site (in my case, hotel website) some published suggestions on the main Hotel Chain website.

It works PERFECT as a standalone webapp (/folder/index.html in my local) as well as vue router history mode, thanks to the magic of this apache.htaccess recipe:

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /ofertasvue/index.html [L]
</IfModule>

      

        
        
        
      

    

My tests are working fine, I have a list of messages in:

/offers

and each message looks like

/ offers / offer / 3989

But I need to host this webapp in progress at www.hotel.com/offers.

The hotel has its own .htaccess of course, but I haven't found the right way to adapt this mod_rewrite recipe, I don't see a clear one.

www.hotel.com/offers works great, but every offer comes when clicked:

http://www.hotel.com/http:/www.hotel.com/offers/offers/offer/3989 <- Yes, duplicate domain, duplicate parent ... It works, only the problem is the appearance external flag ...

Did any of you kids have a similar environment for creating a webapp, in a child url?

Found some documentation about routes, routines, nginx, donuts, etc, but I can't clearly see how you can help me?

These are my two simple routes:

Vue.use(VueRouter);

const routes = [
    {path: '/offers/', component: Ofertas},
    {path: '/offers/offer/:id', name: 'oferta', component: Oferta},
]

const router = new VueRouter({
    routes,
    mode: 'history',
})

      

        
        
        
      

    

Thank!