Having trouble implementing a login theme for keycloak using vue and vuetify

Question

Having trouble implementing a login theme for keycloak using vue and vuetify

My goal is to set up a login page for keycloak using vue and vuetify.

After trying various guides and projects, I haven't been able to achieve success. While I managed to display some logs, the app itself didn't render.

To simplify, I intended to have separate projects for different areas of keycloak such as: [login, account, register].

Each project was structured as follows:

App.vue

This file contains the code for the login page.

main.js

import Vue from 'vue'
// Rest of the JS code...

index.ftl

// HTML template code...

static(folder)

theme.properties

// Properties related to theme settings...

template.ftl

// Another template code snippet...

package.json

{
  // JSON configuration details...
}

vue.config.js

// JavaScript configuration settings...

If additional information is required or if you prefer to clone my repository instead of creating a new app, you can access the GitHub link here.

Reference projects:

Vue TS project

Proof of Concept of vuetify

javascript vue.js vuejs2 keycloak

Answer 1

Answer №1

<!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>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cecdddcd616286">[email protected]</a>/dist/vuetify.min.css"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bec8cbdbcaccd2c3cd707d7e">[email protected]</a>/dist/vuetify.min.js"></script>
    
    </head>
    <body>
        <div id="app">
            <v-card class="mx-auto" max-width="344">
                <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" height="200px" cover></v-img>
        
                <v-card-title>
                    Top western road trips
                </v-card-title>
        
                <v-card-subtitle>
                    1,000 miles of wonder
                </v-card-subtitle>
        
                <v-card-actions>
                    <v-btn color="orange-lighten-2" variant="text">
                        Explore
                    </v-btn>
        
                    <v-spacer></v-spacer>
        
                    <v-btn :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="show = !show"></v-btn>
                </v-card-actions>
        
                <v-expand-transition>
                    <div v-show="show">
                        <v-divider></v-divider>
        
                        <v-card-text>
                            I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time
                            for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data
                            file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got
                            to find a way to escape.
                        </v-card-text>
                    </div>
                </v-expand-transition>
            </v-card>
        </div>
        
        <script>

            const { createApp } = Vue
            const { createVuetify } = Vuetify

            const vuetify = createVuetify()

            const app = createApp()
            app.use(vuetify).mount('#app')

        </script>
    </body>
    </html>

you can use CDN instance of package.json

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2b4b7a7afbaad84b7bab6bdb6">[email protected]</a>/dist/vuetify.min.css"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17616272636e717e572439253922">[email protected]</a>/dist/vuetify.min.js"></script>

Answer 2

<!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>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cecdddcd616286">[email protected]</a>/dist/vuetify.min.css"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bec8cbdbcaccd2c3cd707d7e">[email protected]</a>/dist/vuetify.min.js"></script>
    
    </head>
    <body>
        <div id="app">
            <v-card class="mx-auto" max-width="344">
                <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" height="200px" cover></v-img>
        
                <v-card-title>
                    Top western road trips
                </v-card-title>
        
                <v-card-subtitle>
                    1,000 miles of wonder
                </v-card-subtitle>
        
                <v-card-actions>
                    <v-btn color="orange-lighten-2" variant="text">
                        Explore
                    </v-btn>
        
                    <v-spacer></v-spacer>
        
                    <v-btn :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="show = !show"></v-btn>
                </v-card-actions>
        
                <v-expand-transition>
                    <div v-show="show">
                        <v-divider></v-divider>
        
                        <v-card-text>
                            I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time
                            for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data
                            file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got
                            to find a way to escape.
                        </v-card-text>
                    </div>
                </v-expand-transition>
            </v-card>
        </div>
        
        <script>

            const { createApp } = Vue
            const { createVuetify } = Vuetify

            const vuetify = createVuetify()

            const app = createApp()
            app.use(vuetify).mount('#app')

        </script>
    </body>
    </html>

you can use CDN instance of package.json

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2b4b7a7afbaad84b7bab6bdb6">[email protected]</a>/dist/vuetify.min.css"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17616272636e717e572439253922">[email protected]</a>/dist/vuetify.min.js"></script>

Having trouble implementing a login theme for keycloak using vue and vuetify

App.vue

main.js

index.ftl

static(folder)

theme.properties

template.ftl

package.json

vue.config.js

Answer №1

Similar questions

The header component in Vue does not display updated data before the router enters

React failing to fetch GraphQL query successfully

.class selector malfunctioning

Strategies for resolving duplicate jQuery code in my project

Convert AngularJS JSON.stringify to PHP

Switch between different URL tabs seamlessly in NEXT.JS without needing to refresh the page

Should one consider building a web application by relying on browser AJAX requests a sound practice?

Safari is having trouble loading all the resources on the webpage

Vuelidate validation for passwords seems to consistently be seen as invalid

Sending messages through a Discord Bot without the use of a command

What is the reason behind my button appearing beneath my links in React?

The npm run dev command is not functioning properly within the HackerNews example on Vue.js

What is the process for canceling an href="javascript:void(null)"?

Serving pages with Node JS and loading .js files on the client side

Notification system for managing recurring tasks

Encountered a glitch when attempting to retrieve a Redux state within an async function in Next.js 13

Puppeteer encountered an error when trying to evaluate the script: ReferenceError: TABLE_ROW_SELECTOR was not defined

While using Ckeditor, typing or deleting text will cause an input checkbox to become unchecked and its value to be altered

Determine the number of centimeters on the page as you scroll with jQuery

Exploring provider flags with Vee-validate version 3