Calling custom route (from vue)

Kirby 4 Solved ✔️
1

Hi,
Trying to call a route in one of my custom plugins. The plugin itself works fine but when I call a route defined in the plugin from within another plugin’s .vue file I get an error message saying route not found:

Unexpected error: No route found for path: “api/plugins/flexconfmngr/saveConfigandClose” and request method: “GET”

I’ve tried the direct browser access, same error…

Do I miss something?

2

What does the route look like, the resulting path that is not found looks a bit weird.

But might just be an issue with the loading order of plugins.

3

Thanks Sonja,

<?php

//error_log("Loading FlexConfMngr Plugin");

Kirby::plugin('sqw/flexconfmngr', [
    'blueprints' => [

        'pages/whoops' => __DIR__ . '/blueprints/whoops.yml',
        'pages/yaml' => __DIR__ . '/blueprints/yaml.yml',
        // ... continue adding other blueprints as needed
    ],
    'pageMethods' => [
        'getAllActiveChildren' => function () {
            // Filter children where 'isactive' field in content is true
            return $this->childrenAndDrafts()->filter(function ($child) {
                return $child->content()->get('isactive')->toBool() === true;
            });
        },
        'getAllInActiveChildren' => function () {
            // Filter children where 'isactive' field in content is true
            return $this->childrenAndDrafts()->filter(function ($child) {
                return $child->content()->get('isactive')->toBool() === false;
            });
        },
    ],
    'routes' => [
        [
            'pattern' => 'saveConfigandClose',
            'method' => 'GET',
            'action' => function () {
                // Add your logic for saving the configuration here
                error_log("saveConfigandClose function called");

                // Here, you would implement the logic to save your configuration
                // For example, you might gather data from active pages and save it to config.php

                // After saving, you could redirect back to the main plugin page or perform another action

                return [
                    'status' => 'success',
                    'message' => 'Configuration saved and closing.',
                ];
            },
        ],
    ],
]);

// error_log("Blueprints registered for FlexConfMngr Plugin");

my browser call:

https://kirby:8890/api/plugins/flexconfmngr/saveConfigandClose

result:

{“status”:“error”,“message”:“No route found for path: "plugins/flexconfmngr/saveConfigandClose" and request method: "GET"”,“code”:404,“exception”:“Exception”,“key”:null,“file”:“/kirby/src/Http/Router.php”,“line”:185,“details”:,“route”:null}

4

This is not the correct url for calling your route, this route would be available via https://kirby:8890/saveConfigandClose

5

Indeed Sonja, thanks, the direct browser version works.

How to call this route from within vue, since there the issue still persists.

if I change that to https://kirby:8890/saveConfigandClose the error still persists:
My old vue-call version below:

 let apiEndpoint = `https://kirby:8890/api/plugins/flexconfmngr/saveConfigandClose`;


            console.log("Endpoint:: "+apiEndpoint);

            this.$api.get(apiEndpoint, {
                    pageId: currentPageId
                })
                .then((response) => {
                    if (response.status === 'success') {
                        window.panel.notification.success({
                            message: response.message,
                            timeout: 3000 // Example timeout
                        });
                    } else {
                        console.error('Error:', response.message);
                        window.panel.notification.error({
                            message: response.message
                        });
                    }
                })
6

This refers to an API route, not a standard route, see API | Kirby CMS

7

Thanks Sonja,

Will look into that, if I work it out I’ll post my solution here…

Regards

8

OK, there we go,

The problem was that I did not define the ‘api’=>structure to embed my ‘routes’=> structure.
Below my update code. Using this I only have to use the pattern (method name from the php) in my this.$api.get() call.
Below my vue.js code and corresponding php code in my plugin.

vue.js ::

this.$api.get('saveConfigandClose')
                .then((response) => {
                    if (response.status === 'success') {
                        window.panel.notification.success({
                            message: response.message,
                            timeout: 3000 // Example timeout
                        });
                    } else {
                        console.error('Error:', response.message);
                        window.panel.notification.error({
                            message: response.message
                        });
                    }
                })
                .catch((error) => {
                    console.error('Error:', error);
                    window.panel.notification.error({
                        message: 'Unexpected error: ' + error.message
                    });
                });

Corresponding php code in plugin file ::

 'api' => [
        'routes' => [
            [
                'pattern' => 'saveConfigandClose',
                'method' => 'GET',
                'action' => function () {
                    // Add your logic for saving the configuration here
                    error_log("saveConfigandClose function called");

                    // Here, you would implement the logic to save your configuration
                    // For example, you might gather data from active pages and save it to config.php

                    // After saving, you could redirect back to the main plugin page or perform another action

                    return [
                        'status' => 'success',
                        'message' => 'Configuration saved and closing.',
                    ];
                },
            ],
        ],