Closed aheadfullofcode closed 4 years ago
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.
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
Hi, @jmheretik
Do you have any thoughts on the above?
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.
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?
@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!
Awesome. That's fixed it.
Thank you 👍
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