Vue template changes not updating in browser

[aheadfullofcode]

Hi,

I've got your starter kit up and running but I'm struggling to see how changes to Vue templates get displayed in the browser.

Currently, to see any changes I make to the Vue templates I have to run 'npm run build' . I'm wondering if there is a command that 'watches' the Vue templates for updates. When those updates are made I would expect to see the changes in the browser.

I'm using the vue-json site starter and I've set inject and & kirby-vue-starterkit.plugin.useVueIndex to true as per the docs.

Any help on this would be much appreciated.

Thank you, George

[jmheretik]

hi! sure there is, you also have to follow the readme inside the chosen variant (https://github.com/jmheretik/kirby-vue-starterkit/tree/master/vue-json) ... once you cd into that folder you run npm run dev and it will serve the development vue app and watch for any changes made to vue templates.

[aheadfullofcode]

Ah, I see that now. After running the npm run dev command I was using the details in kirby.config.js to see the site, so I wasn't getting the updating when I refreshed.

Do you know how I would standardize the two domains? Because I use the one generated by npm run dev I cannot access sub-pages...? Could you offer an explanation as to why this is?

Thanks

[aheadfullofcode]

Hi, @jmheretik

Do you have any thoughts on the above?

[jmheretik]

Hi! The two domains are separate on purpose - for a case when you would want to have just a lightweight vue frontend at one URL and the headless backend on another, maybe even a different domain.

I think what you're looking for is the inject option in kirby.config.js. Please have a read here: https://github.com/jmheretik/kirby-vue-starterkit#deploying. This way the built vue app gets injected into kirby and substitutes the kirby frontend completely - that's the point of this starterkit after all :-)

And could you explain a bit more how are you not able to access sub-pages? On my end everything works so I don't know what you mean exactly. You run npm run dev to have a development version of vue running (at http://localhost:8080/ by default) which proxies requests to the backend (running at http://127.0.0.1:8000 by default) automatically - check vue.config.js for details how it happens. Also please check how the router is setup and how it translates the kirby templates to vue views if it's not clear.

Once you're satisfied with your app you run npm run build and then your kirby folder is ready to be deployed as a standalone kirby app with vue frontend.

[george-sawdays]

Hi,

Ok, thanks for explaining the inject concept.

Regarding the subpage issue, when I navigate to http://localhost:3000/photography/trees for example I get 404 and the error page displays. For reference, this is my output in my terminal when I start the app in Dev mode. Could there be something wrong with the proxing?

Georges-MacBook-Pro:src georgeputnam$ npm run dev

> kirby-vue-starterkit@0.1.0 dev /Users/georgeputnam/Documents/sites/noods-website/src
> nuxt

i Kirby running at: http://127.0.0.1:8000                                                   15:41:30
start Loading module                                                          nuxt:purgecss 15:41:30
ℹ PurgeCSS is not enabled because you are in dev mode                         nuxt:purgecss 15:41:30

   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt.js v2.12.2                        │
   │   Running in development mode (spa)      │
   │                                          │
   │   Listening on: http://localhost:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯

ℹ Preparing project for development                                                         15:41:32
ℹ Initial build may take a while                                                            15:41:32
✔ Builder initialized                                                                       15:41:32
✔ Nuxt files generated                                                                      15:41:32

I'd also like to run the project in universal mode. When I switch the app to run in that mode I get all sorts of errors pointing to the Kirby API plugin and in the page mixin. Are these part setup to run a Nuxt app in spa mode only?

[jmheretik]

@george-sawdays you were right, there was a stupid mistake in the proxy configuration - should be fixed now!

As for the SSR universal mode, it's unfortunately not supported right now (as mentioned in the readme). I haven't yet figured out how to design the app to use PHP for server-side rendering since all of Kirby is written in PHP. I have some ideas and I will need to test them, once I have the time to work on this, to find out if and how it's gonna work. But anyway - I'm all open for suggestions concerning the ssr mode!

[aheadfullofcode]

Awesome. That's fixed it.

Thank you 👍