This file is to create wp plugin using vue

Wp-vue.php

<?php

/**

 * Plugin Name: Vue Settings Page Plugin

 * Description: A WordPress plugin that adds a settings page with two tabs using Vue.js.

 * Version: 1.0.0

 * Author: Your Name

 */

// Define the path to the plugin directory.

define( 'VSP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

// Enqueue the Vue.js script and the plugin script.

function vsp_enqueue_scripts() {

    wp_enqueue_script( 'vue', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js', array(), '2.6.12', true );

    wp_enqueue_script( 'vsp-script', plugins_url( '/assets/js/vsp-script.js', __FILE__ ), array( 'vue' ), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'vsp_enqueue_scripts' );

// Add the settings page to the WordPress admin menu.

function vsp_add_settings_page() {

    add_menu_page( 'Vue Settings Page', 'Vue Settings', 'manage_options', 'vsp-settings', 'vsp_settings_page', 'dashicons-admin-generic' );

}

add_action( 'admin_menu', 'vsp_add_settings_page' );

// Define the settings page HTML.

function vsp_settings_page() {

    ?>

    <div id="vsp-app">

        <h1>Vue Settings Page</h1>

        <div class="vsp-tabs">

            <ul>

                <li v-bind:class="{ 'active': activeTab === 'tab1' }" v-on:click="activeTab = 'tab1'">Tab One</li>

                <li v-bind:class="{ 'active': activeTab === 'tab2' }" v-on:click="activeTab = 'tab2'">Tab Two</li>

            </ul>

            <div class="vsp-tab-content" v-show="activeTab === 'tab1'">

                <h2>Tab One</h2>

                <label>Input Field 1</label>

                <input type="text" v-model="input1">

                <label>Input Field 2</label>

                <input type="text" v-model="input2">

                <label>Input Field 3</label>

                <input type="text" v-model="input3">

            </div>

            <div class="vsp-tab-content" v-show="activeTab === 'tab2'">

                <h2>Tab Two</h2>

                <label>Input Field 1</label>

                <input type="text" v-model="input4">

                <label>Input Field 2</label>

                <input type="text" v-model="input5">

                <label>Input Field 3</label>

                <input type="text" v-model="input6">

                <label>Input Field 4</label>

                <input type="text" v-model="input7">

                <label>Input Field 5</label>

                <input type="text" v-model="input8">

            </div>

        </div>

        <button v-on:click="saveSettings">Save Settings</button>

    </div>

    <?php

}

// Define the JavaScript for the Vue app.

function vsp_settings_script() {

    ?>

    <script>

    new Vue({

        el: '#vsp-app',

        data: {

            activeTab: 'tab1',

            input1: '',

            input2

            input3: '',

            input4: '',

            input5: '',

            input6: '',

            input7: '',

            input8: ''

        },

        methods: {

            saveSettings: function() {

                var data = {

                    input1: this.input1,

                    input2: this.input2,

                    input3: this.input3,

                    input4: this.input4,

                    input5: this.input5,

                    input6: this.input6,

                    input7: this.input7,

                    input8: this.input8

                };

                var endpoint = '<?php echo esc_url_raw( rest_url( 'vsp/v1/settings' ) ); ?>';

                jQuery.ajax({

                    method: 'POST',

                    url: endpoint,

                    data: data,

                    beforeSend: function ( xhr ) {

                        xhr.setRequestHeader( 'X-WP-Nonce', '<?php echo wp_create_nonce( 'wp_rest' ); ?>' );

                    }

                }).done( function ( response ) {

                    alert( 'Settings saved.' );

                }).fail( function ( jqXHR, textStatus, errorThrown ) {

                    alert( 'Failed to save settings: ' + errorThrown );

                });

            }

        }

    });

    </script>

    <?php

}

add_action( 'admin_footer', 'vsp_settings_script' );

// Register the REST API endpoint.

function vsp_register_settings_endpoint() {

    register_rest_route( 'vsp/v1', 'settings', array(

        'methods' => 'POST',

        'callback' => 'vsp_save_settings',

        'permission_callback' => function() {

            return current_user_can( 'manage_options' );

        }

    ));

}

add_action( 'rest_api_init', 'vsp_register_settings_endpoint' );

// Save the settings to the WordPress database.

function vsp_save_settings( $request ) {

    $input1 = $request->get_param( 'input1' );

    $input2 = $request->get_param( 'input2' );

    $input3 = $request->get_param( 'input3' );

    $input4 = $request->get_param( 'input4' );

    $input5 = $request->get_param( 'input5' );

    $input6 = $request->get_param( 'input6' );

    $input7 = $request->get_param( 'input7' );

    $input8 = $request->get_param( 'input8' );

    update_option( 'vsp_input1', $input1 );

    update_option( 'vsp_input2', $input2 );

    update_option( 'vsp_input3', $input3 );

    update_option( 'vsp_input4', $input4 );

    update_option( 'vsp_input5', $input5 );

    update_option( 'vsp_input6', $input6 );

    update_option( 'vsp_input7', $input7 );

    update_option( 'vsp_input8', $input8 );

    return new WP_REST_Response( array( 'success' => true ), 200 );

}


/* VSP Settings Page */
#vsp-settings {
    margin-top: 30px;
}

/* VSP Tabs */
.vsp-tabs {
    margin-bottom: 20px;
}

.vsp-tablinks {
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    margin-right: 10px;
    font-size: 16px;
    border-radius: 5px 5px 0 0;
    outline: none;
}

.vsp-tablinks:hover {
    background-color: #ddd;
}

.vsp-tablinks.active {
    background-color: #fff;
    border-bottom: 2px solid #333;
}

.vsp-tabcontent {
    display: none;
    padding: 20px;
    border-radius: 0 5px 5px 5px;
    border: 1px solid #ccc;
}

.vsp-tabcontent h2 {
    margin-top: 0;
}

/* VSP Input Group */
.vsp-input-group {
    margin-bottom: 10px;
}

.vsp-input-group label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.vsp-input-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* VSP Button */
button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}