Add Vue quickstart guide and update documentation navigation#5988
Open
kavindadimuthu wants to merge 2 commits intowso2:masterfrom
Open
Add Vue quickstart guide and update documentation navigation#5988kavindadimuthu wants to merge 2 commits intowso2:masterfrom
kavindadimuthu wants to merge 2 commits intowso2:masterfrom
Conversation
Contributor
WalkthroughIntroduces a new Vue.js quick-start documentation section for the Asgardeo platform, including configuration files that register the Vue SDK in documentation navigation and a comprehensive quickstart guide for scaffolding and configuring Vue applications with Asgardeo authentication. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can approve the review once all CodeRabbit's comments are resolved.Enable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@en/asgardeo/docs/quick-starts/vue.md`:
- Line 22: The "What's next" link currently points to the non-existent route
'/complete-guides/vue/introduction/' in the string "Try out <a href='{{
base_path }}/complete-guides/vue/introduction/' target='_blank'>{{ product_name
}} complete Vue guide</a>"; either remove this anchor entirely from that string
or update the href to an existing page (e.g., remove the
'/complete-guides/vue/introduction/' segment or point to an existing guide like
the React/Angular/Next.js equivalents), and ensure the visible text still makes
sense (or change the text to a generic "Try out other complete guides" if you
remove the Vue-specific target).
In `@en/includes/quick-starts/vue.md`:
- Around line 201-205: Replace the raw URL link
[http://localhost:5173](http://localhost:5173) with descriptive link text like
"your app's homepage" or "Local app (http://localhost:5173)" and update the
generic "[guide]({{ base_path
}}/guides/users/manage-users/#onboard-single-user)" label to something specific
such as "onboard a test user" or "manage test users guide" so both links are
descriptive and accessible; locate and edit these links in the markdown block
containing the homepage visit line and the "To try out sign-in..." paragraph.
- Around line 9-10: Replace the two bulleted items under the application setup
section with a numbered (ordered) list so the steps are clearly sequential:
change the lines that read "Sign into the {{ product_name }} Console and
navigate to **Applications > New Application**." and "Select **Single-Page
Application** and complete the wizard by providing a suitable name and an
authorized redirect URL." into "1." and "2." items respectively, keeping the {{
product_name }} variable and bolded UI labels intact and ensuring both items
remain parallel in grammar and structure.
- Line 59: Update the prose on the line containing "Make sure to stop the dev
server you started in the previous step." by replacing the shorthand "dev" with
the full word "development" so the sentence reads "Make sure to stop the
development server you started in the previous step."; locate this exact
sentence in the Asgardeo Vue SDK quick-start content and perform the one-word
substitution.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7c564762-ea17-4074-b148-d472f33a5481
📒 Files selected for processing (4)
en/asgardeo/docs/quick-starts/vue.mden/asgardeo/mkdocs.ymlen/base.ymlen/includes/quick-starts/vue.md
| ], | ||
| source_code: "<a href='https://github.com/asgardeo/web-ui-sdks/tree/main/samples/teamspace-vue' target='_blank' class='github-icon'>Vue Vite App Sample</a>", | ||
| whats_next: [ | ||
| "Try out <a href='{{ base_path }}/complete-guides/vue/introduction/' target='_blank'>{{ product_name }} complete Vue guide</a>" |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Verify the target markdown file exists.
fd -a 'introduction\.md$' | rg -n 'complete-guides/vue/introduction\.md$' || true
# 2) Show where this path is referenced.
rg -n 'complete-guides/vue/introduction' \
en/asgardeo/docs/quick-starts/vue.md \
en/asgardeo/mkdocs.yml \
en/base.yml \
en/includes/quick-starts/vue.mdRepository: wso2/docs-is
Length of output: 229
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Check if complete-guides/vue directory exists
find . -type d -path '*complete-guides/vue' 2>/dev/null || echo "No complete-guides/vue directory found"
# 2) List all files in complete-guides directory (if it exists)
find . -type d -path '*complete-guides' -exec ls -la {} \; 2>/dev/null | head -50 || echo "No complete-guides directory found"
# 3) Search for any introduction.md files and their locations
fd -t f 'introduction\.md$' 2>/dev/null | head -20 || echo "No introduction.md files found"
# 4) Check if there are any vue-related complete guides or pages
find . -type f -path '*complete*' -name '*vue*' 2>/dev/null | head -20 || echo "No vue complete guide files found"
# 5) Search for references to complete-guides in the codebase
rg 'complete-guides' --type md 2>/dev/null | grep -v 'node_modules' | head -20 || echo "No complete-guides references found"Repository: wso2/docs-is
Length of output: 7499
Remove or update the "What's next" link to a Vue complete guide.
Line 22 links to /complete-guides/vue/introduction/, but this page does not exist in the repository. React, Angular, and Next.js complete guides exist, but a Vue complete guide has not been created. Either remove this link or create the target page.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/asgardeo/docs/quick-starts/vue.md` at line 22, The "What's next" link
currently points to the non-existent route '/complete-guides/vue/introduction/'
in the string "Try out <a href='{{ base_path
}}/complete-guides/vue/introduction/' target='_blank'>{{ product_name }}
complete Vue guide</a>"; either remove this anchor entirely from that string or
update the href to an existing page (e.g., remove the
'/complete-guides/vue/introduction/' segment or point to an existing guide like
the React/Angular/Next.js equivalents), and ensure the visible text still makes
sense (or change the text to a generic "Try out other complete guides" if you
remove the Vue-specific target).
Comment on lines
+9
to
+10
| - Sign into the {{ product_name }} Console and navigate to **Applications > New Application**. | ||
| - Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL. |
Contributor
There was a problem hiding this comment.
Use numbered steps for the application setup procedure.
Line 9 and Line 10 describe sequential actions, so they should be an ordered list.
✏️ Suggested edit
-- Sign into the {{ product_name }} Console and navigate to **Applications > New Application**.
-- Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL.
+1. Sign into the {{ product_name }} Console and navigate to **Applications > New Application**.
+2. Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL.As per coding guidelines, "Use numbered lists for procedures and ordered steps; use bulleted lists for non-sequential information; keep list items parallel in grammar and structure."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - Sign into the {{ product_name }} Console and navigate to **Applications > New Application**. | |
| - Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL. | |
| 1. Sign into the {{ product_name }} Console and navigate to **Applications > New Application**. | |
| 2. Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/includes/quick-starts/vue.md` around lines 9 - 10, Replace the two
bulleted items under the application setup section with a numbered (ordered)
list so the steps are clearly sequential: change the lines that read "Sign into
the {{ product_name }} Console and navigate to **Applications > New
Application**." and "Select **Single-Page Application** and complete the wizard
by providing a suitable name and an authorized redirect URL." into "1." and "2."
items respectively, keeping the {{ product_name }} variable and bolded UI labels
intact and ensuring both items remain parallel in grammar and structure.
|
|
||
| ## Install `@asgardeo/vue` | ||
|
|
||
| Asgardeo Vue SDK provides all the components and composables you need to integrate {{ product_name }} into your app. To get started, simply add the Asgardeo Vue SDK to the project. Make sure to stop the dev server you started in the previous step. |
Contributor
There was a problem hiding this comment.
Replace shorthand in prose (dev) with development.
Line 59 uses shorthand in narrative text.
✏️ Suggested edit
-Asgardeo Vue SDK provides all the components and composables you need to integrate {{ product_name }} into your app. To get started, simply add the Asgardeo Vue SDK to the project. Make sure to stop the dev server you started in the previous step.
+Asgardeo Vue SDK provides all the components and composables you need to integrate {{ product_name }} into your app. To get started, add the Asgardeo Vue SDK to the project. Make sure to stop the development server you started in the previous step.As per coding guidelines, "In prose, use formal language: write 'development' instead of 'dev'."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Asgardeo Vue SDK provides all the components and composables you need to integrate {{ product_name }} into your app. To get started, simply add the Asgardeo Vue SDK to the project. Make sure to stop the dev server you started in the previous step. | |
| Asgardeo Vue SDK provides all the components and composables you need to integrate {{ product_name }} into your app. To get started, add the Asgardeo Vue SDK to the project. Make sure to stop the development server you started in the previous step. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/includes/quick-starts/vue.md` at line 59, Update the prose on the line
containing "Make sure to stop the dev server you started in the previous step."
by replacing the shorthand "dev" with the full word "development" so the
sentence reads "Make sure to stop the development server you started in the
previous step."; locate this exact sentence in the Asgardeo Vue SDK quick-start
content and perform the one-word substitution.
Comment on lines
+201
to
+205
| Visit your app's homepage at [http://localhost:5173](http://localhost:5173). | ||
|
|
||
| !!! Important | ||
|
|
||
| To try out sign-in and sign-out features, create a test user in {{ product_name }} by following this [guide]({{ base_path }}/guides/users/manage-users/#onboard-single-user){:target="_blank"}. |
Contributor
There was a problem hiding this comment.
Use descriptive link text instead of raw/vague link labels.
Line 201 uses a raw URL as link text, and Line 205 uses a generic label (guide).
✏️ Suggested edit
-Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
+Visit your app by opening the [local app homepage](http://localhost:5173).
@@
- To try out sign-in and sign-out features, create a test user in {{ product_name }} by following this [guide]({{ base_path }}/guides/users/manage-users/#onboard-single-user){:target="_blank"}.
+ To try out sign-in and sign-out features, create a test user in {{ product_name }} by following the [Manage users guide]({{ base_path }}/guides/users/manage-users/#onboard-single-user){:target="_blank"}.As per coding guidelines, "Use descriptive link text and do not paste raw URLs as link text."
🧰 Tools
🪛 LanguageTool
[style] ~202-~202: Using many exclamation marks might seem excessive (in this case: 13 exclamation marks for a text that’s 2645 characters long)
Context: ...ocalhost:5173](http://localhost:5173). !!! Important To try out sign-in and s...
(EN_EXCESSIVE_EXCLAMATION)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/includes/quick-starts/vue.md` around lines 201 - 205, Replace the raw URL
link [http://localhost:5173](http://localhost:5173) with descriptive link text
like "your app's homepage" or "Local app (http://localhost:5173)" and update the
generic "[guide]({{ base_path
}}/guides/users/manage-users/#onboard-single-user)" label to something specific
such as "onboard a test user" or "manage test users guide" so both links are
descriptive and accessible; locate and edit these links in the markdown block
containing the homepage visit line and the "To try out sign-in..." paragraph.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This pull request adds comprehensive support for a Vue quickstart guide to the Asgardeo documentation. It introduces a new quickstart page for Vue, integrates it into the navigation, and enhances the documentation metadata and iconography for Vue-related content.
Vue Quickstart Documentation:
vue.md) that walks users through setting up a Vue app with Vite, installing the Asgardeo Vue SDK, implementing sign-in/sign-out, and displaying user profile information. This includes step-by-step instructions and code examples. [1] [2]Navigation and Metadata Enhancements:
mkdocs.yml) to include the new Vue quickstart under the SDKs section.base.yml). [1] [2]Related PRs
Test environment
Security checks
Summary by CodeRabbit