jmheretik / kirby-vue-starterkit Goto Github PK

Hey,
Great idea for a template!
I can't connect the panel as im getting this error runnning Serve:backend

errno: 'ECONNREFUSED', code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 80 }
If i change the kirby.config to 127.0.0.2 it works but when running serve:frontend and og to /panel theres nothing there.

Any idea how can I overcome this ?

I am trying to deploy my Nuxt app using your starterkit. Unfortunately, I am getting two errors when I call the deployed website.

I am injecting into Kirby. So I did the following things:

1. kirby.config.js: inject: true
2. kirby/site/config/config.php: 'kirby-vue-starterkit.plugin.useVueIndex' => true and changed my host to host: 'http://my.staging-domain.com'
3. Created .env.production with NUXT_ENV_BASE_URL=/ and NUXT_ENV_KIRBY_URL=http://my.staging-domain.com
4. Ran npm run build
5. Deployed the kirby folder to my webspace

Now, when I call the website, I get

/home.json:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Error: Request failed with status code 500
    at t.exports (33a14a509ee646ff16f8.js:2)
    at t.exports (33a14a509ee646ff16f8.js:2)
    at XMLHttpRequest._.onreadystatechange (33a14a509ee646ff16f8.js:2)

Any ideas about what I'm doing wrong? I am deploying to the root of a subdomain, so I don't think that this would affect NUXT_ENV_BASE_URL, right?

Edit: I forgot to mention that the site skeleton of index.vue is correctly loaded, including scripts and styles. It can just not access the json.

Thanks so much in advance! 🙏

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

Hi,
We are currently testing out this website for a project which needs to be in two languages. The documentation on how to interact with the API in the context of a multi-language site is not super clear and we were wondering if you would consider implementing or giving us a hint on how to proceed to integrate multi-language function.

Hej,

thanks for the awesome work setting up this awesome starterkit!

I have one question:
You are suggesting deploying the content of kirby to the production server. So if i have kirby.domain.com for the Editor to build the content. How should we handle changes within the kirby system to the Frontend / Vue (nuxt)?
Do you have any suggestions @jmheretik ?

Thanks for your ideas in advance!

I've followed all steps for the vue-nuxt project and get the following error (from console) when running in dev mode -- I just get the endless nuxt loading wheel in the browser -- any thoughts on a solution?

TypeError: languages.find is not a function
    at Object.init (use-language.js?bd7a:7)
    at _callee$ (index.js?51a0:14)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
_callee$ @ client.js?06a0:102

And the relevent JS is from /composables/use-language.js as follows:

let prefix = ''

export const useLanguage = () => {
  const init = (languages) => {
    if (process.client) {
      const location = window.location.href
      const language =
        languages.find((language) => location.endsWith(`/${language.code}`) || location.includes(`/${language.code}/`)) ||
        languages.find((language) => language.isDefault)

      document.documentElement.lang = language != null ? language.code : 'en'
      prefix = language != null ? language.code : ''
    }
  }

  return {
    init,
    prefix,
  }
}

I was just about to push a pull request when you updated code which I was working on. 😄 So why not create a proposal first.

Since node-php-server isn't maintained anymore and a better package by the awesome Sindre Sorhus exists, why not switch to php-server. A advantage is to let the script kill the PHP server automatically. Therefore you could drop the Nuxt hook. The setup would be:

const phpServer = require('php-server')
start: () => {
  const server = await phpServer({
    hostname: module.exports.host,
    port: module.exports.port,
    base: module.exports.base,
    router: module.exports.routerPath
  })

  console.log('\x1b[32m%s\x1b[0m', `Kirby running at ${server.url}\n`)
},

I also changed the console log to green to differentiate normal texts from the starting server.

Your continuous work on this project is amazing. It's so much fun following the progress and all the new ideas your put in. Keep up the great work!

How can i make redirects work when using @nuxtjs/redirect-module? Its working in dev mode on localhost, but not when building with injecting kirby. Any hints? @jmheretik

Really usefull starterkit!
I was struggling with login into the panel because there is only the API user.
Can we add a default Admin user maybe?
They only way I found to add a admin user was to copy a user from another Kirby project 🙂
What do you think?

Hi there, I am checking out the starter-kit and it looks very promising. I do get an error that I can't figure out.

Injecting into kirby works fine with npm run dev

building looks good but if I run generate I get:

`
FATAL path.startsWith is not a function 20:00:34

at Object.strip (utils/path.utils.js:3:14)
at Object.toPageUri (utils/path.utils.js:9:34)
at getPage (composables/use-kirby.js:27:42)
at downloadImages (modules/kirby-scraper.js:24:24)
at Array.map ()
at modules/kirby-scraper.js:13:30
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Nuxt.callHook (node_modules/hable/dist/hable.js:1:1021)
at async Generator.initiate (node_modules/@nuxt/generator/dist/generator.js:163:5)
at async Generator.generate (node_modules/@nuxt/generator/dist/generator.js:133:5)
at async generate (node_modules/@nuxt/cli/dist/cli-generate.js:106:22)
at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:342:7)
at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:2803:7)

`

I have no idea so any help would be greatly appreciated.

Maybe I missed something here but I'm using the vue-nuxt folder and each time I try to go on /panel, it fallback on 404 page.

First of all, thank you so much for this work!
I'm working on a Nuxt SPA with Kirby as headless CMS, and this starter kit is EXACTLY what I'm looking for! 👍

I'm trying to inject the Vue app into Kirby, using useVueIndexoption, but I don't see any vue-index.php file into the Kirby plugin, am I looking wrong? 🤔

Hi there, thanks so much for these starterkits, they are super helpful.
At the risk of sounding presumptuous, did you ever consider a Nuxt SSR version or one using the KQL plugin?

I'm following your steps with vue-api flavor but nothing is displaying.
there's no error neither and modules are installing ok
should I add something to the .env ? which NPM version ?