diff --git a/integrations/applications/vue-application/pom.xml b/integrations/applications/vue-application/pom.xml
new file mode 100644
index 0000000..fe03d36
--- /dev/null
+++ b/integrations/applications/vue-application/pom.xml
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ org.wso2.carbon.identity.integration.ui.templates
+ integration-templates
+ 1.0.35-SNAPSHOT
+ ../../pom.xml
+
+
+ vue-application
+ org.wso2.carbon.identity.integration.ui.templates.applications.vue-application
+ 4.0.0
+ pom
+ http://wso2.org
+
+
+
+
+ org.codehaus.mojo
+ build-helper-maven-plugin
+
+
+ org.apache.maven.plugins
+ maven-assembly-plugin
+
+ false
+
+
+
+ org.apache.maven.plugins
+ maven-release-plugin
+
+
+
+
+
diff --git a/integrations/applications/vue-application/resources/info.json b/integrations/applications/vue-application/resources/info.json
new file mode 100644
index 0000000..43765f9
--- /dev/null
+++ b/integrations/applications/vue-application/resources/info.json
@@ -0,0 +1,19 @@
+{
+ "id": "vue-application",
+ "version": "1.0.0",
+ "name": "Vue",
+ "description": "Client-rendered (CSR) Vue apps scaffolded with create-vue or Vite.",
+ "image": "${CONSOLE_BASE_URL}/resources/applications/assets/images/technologies/vue-logo.svg",
+ "displayOrder": 2,
+ "category": "TECHNOLOGY",
+ "tags": [
+ "OIDC"
+ ],
+ "type": "applications",
+ "customAttributes": [
+ {
+ "key": "featureStatus",
+ "value": "new"
+ }
+ ]
+}
diff --git a/integrations/applications/vue-application/resources/metadata.json b/integrations/applications/vue-application/resources/metadata.json
new file mode 100644
index 0000000..e267dd6
--- /dev/null
+++ b/integrations/applications/vue-application/resources/metadata.json
@@ -0,0 +1,130 @@
+{
+ "create": {
+ "form": {
+ "fields": [
+ {
+ "id": "application-name",
+ "aria-label": "Application Name",
+ "name": "name",
+ "label": "Name",
+ "type": "text",
+ "required": true,
+ "placeholder": "My App",
+ "dataComponentId": "vue-create-wizard-application-name",
+ "handlers": [
+ {
+ "name": "uniqueApplicationName",
+ "type": "initialize"
+ },
+ {
+ "name": "applicationName",
+ "type": "validation"
+ }
+ ]
+ },
+ {
+ "id": "callback-url",
+ "aria-label": "Authorized Redirect URL",
+ "name": "inboundProtocolConfiguration.oidc.callbackURLs.[0]",
+ "label": "Authorized Redirect URL",
+ "type": "text",
+ "required": true,
+ "placeholder": "https://myapp.io/login",
+ "dataComponentId": "vue-create-wizard-callback-url"
+ },
+ {
+ "id": "image-url",
+ "aria-label": "Image URL",
+ "name": "imageUrl",
+ "label": "Image URL",
+ "type": "text",
+ "required": false,
+ "dataComponentId": "vue-create-wizard-image-url",
+ "hidden": true,
+ "handlers": [
+ {
+ "name": "dependentProperty",
+ "type": "submission",
+ "props": {
+ "placeholder": "clientOrigin"
+ }
+ },
+ {
+ "name": "dependentProperty",
+ "type": "submission",
+ "props": {
+ "placeholder": "appBaseNameWithoutTenant"
+ }
+ }
+ ]
+ }
+ ]
+ },
+ "guide": [ "##### Name\n***\n***\nA unique name to identify your application.\n***\nE.g., Vue\n***\n***\n***\n***\n##### Authorized Redirect URL\n***\n***\nThe URL to which the authorization code is sent to upon authentication and where the user is redirected to upon logout.\n***\nE.g., https://myapp.io/login" ]
+ },
+ "edit": {
+ "tabs": [
+ {
+ "id": "quick-start",
+ "displayName": "Guide",
+ "contentType": "guide",
+ "guide": "### Configure the ``\n***\n***\n***\n> > To connect ${productName} with your Vue application, follow the [Vue SDK Quick Start](${docSiteURL}/quick-starts/vue/).\n> \n\n***\n***\n> Register the `AsgardeoPlugin` and wrap your app with `` using the following configuration.\n\n***\n***\n> **`src/main.ts`**\n> ```ts\n> import { createApp } from 'vue'\n> import './style.css'\n> import App from './App.vue'\n> import { AsgardeoPlugin } from '@asgardeo/vue'\n>\n> const app = createApp(App)\n> app.use(AsgardeoPlugin)\n> app.mount('#app')\n> ```\n> ***\n> **`src/App.vue`**\n> ```vue\n> \n>\n> \n> client-id=\"${protocol.oidc.clientId}\"\n> base-url=\"${serverOrigin}/t/${tenantDomain}\"\n> :scopes=\"'${moderatedData.scopes.spaceSeperatedList}'.split(' ')\"\n> >\n> \n> \n> \n> ```\n\n***\n***\n***\n***\n### Configurations\n***\n***\n***\n> For more details on configurations and server endpoints, go to the [Protocol](#tab=protocol) and [Info](#tab=info) tabs, respectively.\n> ***\n> ***\n> ***\n> **Client ID:**\n> ***\n> ```bash\n> ${protocol.oidc.clientId}\n> ```\n> ***\n> **Base URL:**\n> ***\n> ```bash\n> ${serverOrigin}/t/${tenantDomain}\n> ```\n> ***\n> **Redirect URL:**\n> ***\n> ```bash\n> ${protocol.oidc.callbackURLs[0]}\n> ```\n> ***\n> **Scope:**\n> ***\n> ```bash\n> ${moderatedData.scopes.spaceSeperatedList}\n> ```\n\n***\n***"
+ },
+ {
+ "id": "general",
+ "hiddenComponents": [
+ "application-edit-general-details-form-image-url"
+ ]
+ },
+ {
+ "id": "protocol",
+ "displayName": "Protocol",
+ "hiddenComponents": [
+ "application-edit-access-settings-inbound-oauth2-oidc-form-pushed-authorization-requests",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-request-object",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-validate-token-binding",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-revoke-access-token-upon-user-logout",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-id-token-encryption",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-id-token-encryption-algorithm",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-id-token-encryption-method",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-id-token-response-signing-algorithm",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-logout-urls",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-client-authentication",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-validate-token-binding-and-revokation",
+ "application-edit-access-settings-inbound-oauth2-oidc-form-certificate"
+ ]
+ },
+ {
+ "id": "user-attributes"
+ },
+ {
+ "id": "sign-in-method"
+ },
+ {
+ "id": "api-authorization"
+ },
+ {
+ "id": "application-roles"
+ },
+ {
+ "id": "provisioning"
+ },
+ {
+ "id": "advanced",
+ "hiddenComponents": [
+ "application-edit-advanced-settings-form-client-attestation",
+ "application-edit-advanced-settings-form-trusted-apps",
+ "application-edit-advanced-settings-form-platform-settings",
+ "application-edit-advanced-settings-form-application-native-authentication"
+ ]
+ },
+ {
+ "id": "shared-access"
+ },
+ {
+ "id": "info"
+ }
+ ],
+ "defaultActiveTabId": "quick-start"
+ }
+}
diff --git a/integrations/applications/vue-application/resources/template.json b/integrations/applications/vue-application/resources/template.json
new file mode 100644
index 0000000..d296f0e
--- /dev/null
+++ b/integrations/applications/vue-application/resources/template.json
@@ -0,0 +1,66 @@
+{
+ "payload": {
+ "name": "Vue",
+ "advancedConfigurations": {
+ "discoverableByEndUsers": false,
+ "skipLogoutConsent": true,
+ "skipLoginConsent": true
+ },
+ "imageUrl": "${clientOrigin}/${appBaseNameWithoutTenant}/resources/applications/assets/images/technologies/vue-logo.svg",
+ "authenticationSequence": {
+ "type": "DEFAULT",
+ "steps": [
+ {
+ "id": 1,
+ "options": [
+ {
+ "idp": "LOCAL",
+ "authenticator": "basic"
+ }
+ ]
+ }
+ ]
+ },
+ "claimConfiguration":{
+ "dialect":"LOCAL",
+ "requestedClaims": [
+ {
+ "claim": {
+ "uri":"http://wso2.org/claims/username"
+ }
+ }
+ ]
+ },
+ "inboundProtocolConfiguration": {
+ "oidc": {
+ "accessToken": {
+ "applicationAccessTokenExpiryInSeconds": 3600,
+ "bindingType": "sso-session",
+ "revokeTokensWhenIDPSessionTerminated": true,
+ "type": "Default",
+ "userAccessTokenExpiryInSeconds": 3600,
+ "validateTokenBinding": false
+ },
+ "grantTypes": [
+ "authorization_code",
+ "refresh_token"
+ ],
+ "allowedOrigins": [],
+ "callbackURLs": [],
+ "pkce": {
+ "mandatory": true,
+ "supportPlainTransformAlgorithm": false
+ },
+ "publicClient": true,
+ "refreshToken": {
+ "expiryInSeconds": 86400,
+ "renewRefreshToken": true
+ }
+ }
+ },
+ "associatedRoles": {
+ "allowedAudience": "APPLICATION",
+ "roles": []
+ }
+ }
+}
diff --git a/integrations/pom.xml b/integrations/pom.xml
index 361ea32..e4cf1bd 100644
--- a/integrations/pom.xml
+++ b/integrations/pom.xml
@@ -71,6 +71,7 @@
applications/nextjs-application
applications/angular-application
applications/expressjs-application
+ applications/vue-application
applications/digital-wallet-application