index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vony Javascript</title>
    <script src="vony.js"></script>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css'
        integrity='sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q=='
        crossorigin='anonymous' />
</head>

<body>
    <br>

    <div class="container">

        <h3 id="app">

        </h3>

        <button onclick="goTo('Home')">Home</button>
        <button onclick="goTo('About')">About</button>
        <button onclick="goTo('Profile')">Profile</button>
        <button onclick="goTo('Contact')">Contact</button>
    </div>

    <script>
        let myApp;

        ready(() => {
            myApp = Vony({ 
                id: 'app' ,
                title : 'Welcome to Vony JS'
            }).set('This is Dashboard');
        });

        function goTo(value) {
            Vony({
                urlRoute : value+'.html',
                title    : value
            })
            .route(() => {
                myApp.set('This is ' + value);
            });
        }

    </script>
</body>

</html>