Pass plugin options to Vue Component

Kirby 3 Solved ✅
1

Hi Folks,

just started to work with Kirby 3 and I’m playing arround with the all new VueJS backend. I wonder where to find the documentation of this.$api.

My usecase #1 is to send some custom headers along the request but wasn’t yet able to configure it correctly.

submit() {
  const headers = {MY-HEADER: 12345678};
  this.$api.config.endpoint = "https:/example.com";
  this.$api.post('api', this.data, headers);
}

The second question I have is how the heck can I pass plugin options to a Vue compnent? I found out that there is a function $t which loads translations definded in Kirby::plugin

// index.php
Kirby::plugin('gearsdigital/my-plugin', [
 'translations' => [
    'en' => [
      'header' => 'My Title',
    ]
  ]
]);

// Component.js
$t('header')

Kind regards :slight_smile:

2

Okay, #1 is not relevant anymore -> https://github.com/pagekit/vue-resource

3

You’re probably looking for props / computed, check out this Hello world example from the docs.

1 Like
4

Thank your very much @sylvainjule !

I tried that before but didn’t get it working. I wonder why I have to register a field when all I want is to have my plugin options available within my Vue component :thinking:

Kirby::plugin('gearsdigital/my-plugin', [
  'options' => [
    'repository' => 'https://example.com',
    'token' => '87687687wq8w7q'
]);
5

I have no clue if this is the intended way but I simply created a custom API Endpoint which returns all options as JSON. I need to filter this to return only plugin releated options but this is an easy one.

Kirby::plugin('gearsdigital/my-plugin', [
    'options' => [
        'token' => STR::random(10)
    ],
    'api' => [
        'routes' => [
            [
                'pattern' => 'my-plugin/options',
                'action' => function () {
                    return json_encode(kirby()->options());
                }
            ]
        ]
    ]
]);

Now you can fetch the options by AJAX :thinking: :hugs:

  export default {
    data() {
      return {
        options: null
      };
    },
    async created() {
      const response = await this.$api.get('my-plugin/options');
      this.options = response.options;
    }
  };