From fd7a5cc4054c0e51db668add99d92d6388afa7fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:51:36 +0300
Subject: [PATCH] browser source added form components

---
 src/views/autocomplete/AutoCompleteDoc.vue    | 139 +++++++++
 src/views/calendar/CalendarDoc.vue            | 140 +++++++++
 src/views/cascadeselect/CascadeSelectDoc.vue  | 130 +++++++++
 src/views/checkbox/CheckboxDoc.vue            |  62 ++++
 src/views/chips/ChipsDoc.vue                  |  49 ++++
 src/views/dropdown/DropdownDoc.vue            | 167 +++++++++++
 src/views/editor/EditorDoc.vue                |  46 +++
 src/views/floatlabel/FloatLabelDemo.vue       | 271 ++++++++++++++++++
 src/views/inputgroup/InputGroupDoc.vue        | 134 +++++++++
 src/views/inputmask/InputMaskDoc.vue          |  63 ++++
 src/views/inputnumber/InputNumberDoc.vue      | 146 ++++++++++
 src/views/inputswitch/InputSwitchDoc.vue      |  33 +++
 src/views/inputtext/InputTextDoc.vue          |  92 ++++++
 src/views/invalid/InvalidDemo.vue             | 207 +++++++++++++
 src/views/knob/KnobDoc.vue                    |  73 +++++
 src/views/listbox/ListboxDoc.vue              | 105 +++++++
 src/views/multiselect/MultiSelectDoc.vue      | 159 ++++++++++
 src/views/password/PasswordDoc.vue            |  64 +++++
 src/views/radiobutton/RadioButtonDoc.vue      |  57 ++++
 src/views/selectbutton/SelectButtonDoc.vue    |  53 ++++
 src/views/slider/SliderDoc.vue                |  68 ++++-
 src/views/textarea/TextareaDoc.vue            |  37 +++
 src/views/togglebutton/ToggleButtonDoc.vue    |  33 +++
 src/views/treeselect/TreeSelectDoc.vue        |  62 +++-
 .../tristatecheckbox/TriStateCheckboxDoc.vue  |  31 ++
 25 files changed, 2417 insertions(+), 4 deletions(-)

diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 1dc9f0ebb..0c54cdd1e 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -693,6 +693,145 @@ export default {
     }
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
+        <script src="./CountryService.js"><\\/script>`,
+                    content:`
+        <div id="app">
+            <h5>Basic</h5>
+            <p-autocomplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
+
+            <h5>Grouped</h5>
+            <p-autocomplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" option-group-label="label" option-group-children="items">
+                <template #optiongroup="slotProps">
+                    <div class="p-d-flex p-ai-center country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
+                        <div class="p-ml-2">{{slotProps.item.label}}</div>
+                    </div>
+                </template>
+            </p-autocomplete>
+
+            <h5>Dropdown, Templating and Force Selection</h5>
+            <p-autocomplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" force-selection>
+                <template #item="slotProps">
+                    <div class="country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
+                        <div class="p-ml-2">{{slotProps.item.name}}</div>
+                    </div>
+                </template>
+            </p-autocomplete>
+
+            <h5>Virtual Scroll (1000 Items)</h5>
+            <p-autocomplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtual-scroller-options="{ itemSize: 31 }" field="label" dropdown></p-autocomplete>
+
+            <h5>Multiple</h5>
+            <span class="p-fluid">
+                <p-autocomplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
+            </span>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+        const { FilterService,FilterMatchMode } = primevue.api;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    countryService.value.getCountries().then(data => countries.value = data);
+                })
+
+                const countries = ref();
+                const countryService = ref(new CountryService());
+                const selectedCountry1 = ref();
+                const selectedCountry2 = ref();
+                const selectedCity = ref();
+                const filteredCities = ref();
+                const filteredCountries = ref();
+                const selectedCountries = ref([]);
+                const selectedItem = ref();
+                const filteredItems = ref();
+                const groupedCities = ref ([{
+                    label: 'Germany', code: 'DE',
+                    items: [
+                        {label: 'Berlin', value: 'Berlin'},
+                        {label: 'Frankfurt', value: 'Frankfurt'},
+                        {label: 'Hamburg', value: 'Hamburg'},
+                        {label: 'Munich', value: 'Munich'}
+                    ]
+                },
+                {
+                    label: 'USA', code: 'US',
+                    items: [
+                        {label: 'Chicago', value: 'Chicago'},
+                        {label: 'Los Angeles', value: 'Los Angeles'},
+                        {label: 'New York', value: 'New York'},
+                        {label: 'San Francisco', value: 'San Francisco'}
+                    ]
+                },
+                {
+                    label: 'Japan', code: 'JP',
+                    items: [
+                        {label: 'Kyoto', value: 'Kyoto'},
+                        {label: 'Osaka', value: 'Osaka'},
+                        {label: 'Tokyo', value: 'Tokyo'},
+                        {label: 'Yokohama', value: 'Yokohama'}
+                    ]
+                }]);
+                const items = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+                const searchCountry = (event) => {
+                    setTimeout(() => {
+                        if (!event.query.trim().length) {
+                            filteredCountries.value = [...countries.value];
+                        }
+                        else {
+                            filteredCountries.value = countries.value.filter((country) => {
+                                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                            });
+                        }
+                    }, 250);
+                };
+                const searchCity = (event) => {
+                    let query = event.query;
+                    let newFilteredCities = [];
+
+                    for (let country of groupedCities.value) {
+                        let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+                        if (filteredItems && filteredItems.length) {
+                            newFilteredCities.push({...country, ...{items: filteredItems}});
+                        }
+                    }
+
+                    filteredCities.value = newFilteredCities;
+                };
+                const searchItems = (event) => {
+                    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+                    let query = event.query;
+                    let _filteredItems = [];
+
+                    for(let i = 0; i < this.items.length; i++) {
+                        let item = this.items[i];
+                        if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                            _filteredItems.push(item);
+                        }
+                    }
+
+                    filteredItems.value = _filteredItems;
+                }
+
+                return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity, searchItems, selectedItem, filteredItems, items }
+            },
+            components: {
+                "p-autocomplete": primevue.autocomplete
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>`
                 }
             }
         }
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index a55bf0a01..7b4541dae 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -849,6 +849,146 @@ export default {
     text-decoration: line-through;
 }
 </style>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Popup</h5>
+            <div class="p-fluid p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="basic">Basic</label>
+                    <p-calendar id="basic" v-model="date1"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="dateformat">DateFormat</label>
+                    <p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="icon">Icon</label>
+                    <p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="minmax">MinMax</label>
+                    <p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="disableddays">Disabled Days</label>
+                    <p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="navigators">Navigators</label>
+                    <p-calendar id="navigators" v-model="date6" :month-navigator="true" :year-navigator="true" year-range="2000:2030"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="multiple">Multiple</label>
+                    <p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="range">Range</label>
+                    <p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="buttonbar">Button Bar</label>
+                    <p-calendar id="buttonbar" v-model="date7" :show-button-bar="true"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="time24">Time / 24h</label>
+                    <p-calendar id="time24" v-model="date8" :show-time="true" :show-seconds="true"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="time12">Time / 12h</label>
+                    <p-calendar id="time12" v-model="date9" :time-only="true" hour-format="12"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="monthpicker">Month Picker</label>
+                    <p-calendar id="monthpicker" v-model="date10" view="month" date-format="mm/yy" :year-navigator="true" year-range="2000:2030"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="multiplemonths">Multiple Months</label>
+                    <p-calendar id="multiplemonths" v-model="date11" :number-of-months="3"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="datetemplate">Date Template</label>
+                    <p-calendar id="datetemplate" v-model="date12">
+                        <template #date="slotProps">
+                            <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
+                            <template v-else>{{slotProps.date.day}}</template>
+                        </template>
+                    </p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="touchUI">TouchUI</label>
+                    <p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
+                </div>
+            </div>
+
+            <h5>Inline</h5>
+            <p-calendar v-model="date14" :inline="true" :show-week="true" />
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                let today = new Date();
+                let month = today.getMonth();
+                let year = today.getFullYear();
+                let prevMonth = (month === 0) ? 11 : month -1;
+                let prevYear = (prevMonth === 11) ? year - 1 : year;
+                let nextMonth = (month === 11) ? 0 : month + 1;
+                let nextYear = (nextMonth === 0) ? year + 1 : year;
+
+                const minDate = ref(new Date());
+                const maxDate = ref(new Date());
+                const invalidDates = ref();
+                const date1 = ref();
+                const date2 = ref();
+                const date3 = ref();
+                const date4 = ref();
+                const date5 = ref();
+                const date6 = ref();
+                const date7 = ref();
+                const date8 = ref();
+                const date9 = ref();
+                const date10 = ref();
+                const date11 = ref();
+                const date12 = ref();
+                const date13 = ref();
+                const date14 = ref();
+                const dates1 = ref();
+                const dates2 = ref();
+
+                minDate.value.setMonth(prevMonth);
+                minDate.value.setFullYear(prevYear);
+                maxDate.value.setMonth(nextMonth);
+                maxDate.value.setFullYear(nextYear);
+
+                let invalidDate = new Date();
+                invalidDate.setDate(today.getDate() - 1);
+                invalidDates.value = [today, invalidDate];
+
+                return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
+                    date8, date9, date10, date11, date12, date13, date14, dates1, dates2 }
+            },
+            components: {
+                "p-calendar": primevue.calendar
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .special-day {
+            text-decoration: line-through;
+        }
+        </style>
 `
                 }
             }
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index cadd87132..28066ceda 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -607,6 +607,136 @@ img {
     margin-right: 0.5rem;
 }
 </style>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-cascadeselect v-model="selectedCity1" :options="countries" option-label="cname" option-group-label="name"
+                    :option-group-children="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City"></p-cascadeselect>
+
+            <h5>Templating</h5>
+            <p-cascadeselect v-model="selectedCity2" :options="countries" option-label="cname" option-group-label="name" 
+                    :option-group-children="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
+                <template #option="slotProps">
+                    <div class="country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
+                        <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
+                        <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                        <span>{{slotProps.option.cname || slotProps.option.name}}</span>
+                    </div>
+                </template>
+            </p-cascadeselect>
+
+            <h5>Loading State</h5>
+            <p-cascadeselect placeholder="Loading..." loading style="minWidth: 14rem"></p-cascadeselect>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const selectedCity1 = ref();
+                const selectedCity2 = ref();
+                const countries = ref([
+                    {
+                        name: 'Australia',
+                        code: 'AU',
+                        states: [
+                            {
+                                name: 'New South Wales',
+                                cities: [
+                                    {cname: 'Sydney', code: 'A-SY'},
+                                    {cname: 'Newcastle', code: 'A-NE'},
+                                    {cname: 'Wollongong', code: 'A-WO'}
+                                ]
+                            },
+                            {
+                                name: 'Queensland',
+                                cities: [
+                                    {cname: 'Brisbane', code: 'A-BR'},
+                                    {cname: 'Townsville', code: 'A-TO'}
+                                ]
+                            },
+                            
+                        ]
+                    },
+                    {
+                        name: 'Canada', 
+                        code: 'CA',
+                        states: [
+                            {
+                                name: 'Quebec',
+                                cities: [
+                                    {cname: 'Montreal', code: 'C-MO'},
+                                    {cname: 'Quebec City', code: 'C-QU'}
+                                ]
+                            },
+                            {
+                                name: 'Ontario',
+                                cities: [
+                                    {cname: 'Ottawa', code: 'C-OT'},
+                                    {cname: 'Toronto', code: 'C-TO'}
+                                ]
+                            },
+                            
+                        ]
+                    },
+                    {
+                        name: 'United States',
+                        code: 'US',
+                        states: [
+                            {
+                                name: 'California',
+                                cities: [
+                                    {cname: 'Los Angeles', code: 'US-LA'},
+                                    {cname: 'San Diego', code: 'US-SD'},
+                                    {cname: 'San Francisco', code: 'US-SF'}
+                                ]
+                            },
+                            {
+                                name: 'Florida',
+                                cities: [
+                                    {cname: 'Jacksonville', code: 'US-JA'},
+                                    {cname: 'Miami', code: 'US-MI'},
+                                    {cname: 'Tampa', code: 'US-TA'},
+                                    {cname: 'Orlando', code: 'US-OR'}
+                                ]
+                            },
+                            {
+                                name: 'Texas',
+                                cities: [
+                                    {cname: 'Austin', code: 'US-AU'},
+                                    {cname: 'Dallas', code: 'US-DA'},
+                                    {cname: 'Houston', code: 'US-HO'}
+                                ]
+                            }
+                        ]
+                    }
+                ]);
+
+                return { selectedCity1, selectedCity2, countries }
+            },
+            components: {
+                "p-cascadeselect": primevue.cascadeselect
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        img {
+            width: 18px;
+            margin-right: 0.5rem;
+        }
+        </style>
 `
                 }
             }
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 30822bbfd..1f12ae17f 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -272,6 +272,68 @@ export default {
     }
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
+                    content: `
+    <div id="app">
+        <h5>Basic</h5>
+        <div class="p-field-checkbox">
+            <p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox>
+            <label for="binary">{{checked}}</label>
+        </div>
+
+        <h5>Multiple</h5>
+        <div class="p-field-checkbox">
+            <p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
+            <label for="city1">Chicago</label>
+        </div>
+        <div class="p-field-checkbox">
+            <p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
+            <label for="city2">Los Angeles</label>
+        </div>
+        <div class="p-field-checkbox">
+            <p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox>
+            <label for="city3">New York</label>
+        </div>
+        <div class="p-field-checkbox">
+            <p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
+            <label for="city4">San Francisco</label>
+        </div>
+
+        <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
+        <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+            <p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
+            <label :for="category.key">{{category.name}}</label>
+        </div>
+    </div>
+
+    <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const checked = ref(false);
+                const cities = ref([]);
+                const categories = ref([
+                    {name: 'Accounting', key: 'A'},
+                    {name: 'Marketing', key: 'M'},
+                    {name: 'Production', key: 'P'},
+                    {name: 'Research', key: 'R'}
+                ]);
+                const selectedCategories = ref(categories.value.slice(1,3));
+
+                return { checked, cities, categories, selectedCategories }
+            },
+            components: {
+                "p-checkbox": primevue.checkbox
+            }
+        };
+
+        createApp(App).use(primevue.config.default).mount('#app');
+    <\\/script>
+`
                 }
             }
         }
diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue
index de9fb9c07..de849969f 100755
--- a/src/views/chips/ChipsDoc.vue
+++ b/src/views/chips/ChipsDoc.vue
@@ -254,6 +254,55 @@ export default {
 }
 <\\/script>
 
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="p-fluid">
+                <div class="card">
+                    <h5>Basic</h5>
+                    <p-chips v-model="value1"></p-chips>
+
+                    <h5>Comma Separator</h5>
+                    <p-chips v-model="value2" separator=","></p-chips>
+
+                    <h5>Template</h5>
+                    <p-chips v-model="value3">
+                        <template #chip="slotProps">
+                            <div>
+                                <span>{{slotProps.value}} - (active) </span>
+                                <i class="pi pi-user-plus" style="font-size: 14px"></i>
+                            </div>
+                        </template>
+                    </p-chips>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref();
+                const value2 = ref();
+                const value3 = ref();
+
+                return { value1, value2, value3 }
+            },
+            components: {
+                "p-chips": primevue.chips
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
 `
                 }
             }
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 80d574542..f40b512fc 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -830,6 +830,173 @@ export default {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-dropdown v-model="selectedCity1" :options="cities" option-label="name" option-value="code" placeholder="Select a City"></p-dropdown>
+
+            <h5>Editable</h5>
+            <p-dropdown v-model="selectedCity2" :options="cities" option-label="name" :editable="true"></p-dropdown>
+
+            <h5>Grouped</h5>
+            <p-dropdown v-model="selectedGroupedCity" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items">
+                <template #optiongroup="slotProps">
+                    <div class="p-d-flex p-ai-center country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
+                        <div>{{slotProps.option.label}}</div>
+                    </div>
+                </template>
+            </p-dropdown>
+
+            <h5>Advanced with Templating, Filtering and Clear Icon</h5>
+            <p-dropdown v-model="selectedCountry" :options="countries" option-label="name" :filter="true" placeholder="Select a Country" :show-clear="true">
+                <template #value="slotProps">
+                    <div class="country-item country-item-value" v-if="slotProps.value">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                        <div>{{slotProps.value.name}}</div>
+                    </div>
+                    <span v-else>
+                        {{slotProps.placeholder}}
+                    </span>
+                </template>
+                <template #option="slotProps">
+                    <div class="country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                        <div>{{slotProps.option.name}}</div>
+                    </div>
+                </template>
+            </p-dropdown>
+
+            <h5>Loading State</h5>
+            <p-dropdown placeholder="Loading..." loading></p-dropdown>
+
+            <h5>Virtual Scroll (1000 Items)</h5>
+            <p-dropdown v-model="selectedItem1" :options="items" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 31 }" placeholder="Select Item"></p-dropdown>
+
+            <h5>Virtual Scroll (1000 Items) and Lazy</h5>
+            <p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
+                <template v-slot:loader="{ options }">
+                    <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                        <p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
+                    </div>
+                </template>
+            </p-dropdown>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const selectedCity1 = ref();
+                const selectedCity2 = ref();
+                const selectedCountry = ref();
+                const selectedGroupedCity = ref();
+                const selectedItem1 = ref();
+                const selectedItem2 = ref();
+                const loading = ref(false);
+                const cities = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const countries = ref([
+                    {name: 'Australia', code: 'AU'},
+                    {name: 'Brazil', code: 'BR'},
+                    {name: 'China', code: 'CN'},
+                    {name: 'Egypt', code: 'EG'},
+                    {name: 'France', code: 'FR'},
+                    {name: 'Germany', code: 'DE'},
+                    {name: 'India', code: 'IN'},
+                    {name: 'Japan', code: 'JP'},
+                    {name: 'Spain', code: 'ES'},
+                    {name: 'United States', code: 'US'}
+                ]);
+                const groupedCities = ref([
+                    {
+                        label: 'Germany', code: 'DE',
+                        items: [
+                            {label: 'Berlin', value: 'Berlin'},
+                            {label: 'Frankfurt', value: 'Frankfurt'},
+                            {label: 'Hamburg', value: 'Hamburg'},
+                            {label: 'Munich', value: 'Munich'}
+                        ]
+                    },
+                    {
+                        label: 'USA', code: 'US',
+                        items: [
+                            {label: 'Chicago', value: 'Chicago'},
+                            {label: 'Los Angeles', value: 'Los Angeles'},
+                            {label: 'New York', value: 'New York'},
+                            {label: 'San Francisco', value: 'San Francisco'}
+                        ]
+                    },
+                    {
+                        label: 'Japan', code: 'JP',
+                        items: [
+                            {label: 'Kyoto', value: 'Kyoto'},
+                            {label: 'Osaka', value: 'Osaka'},
+                            {label: 'Tokyo', value: 'Tokyo'},
+                            {label: 'Yokohama', value: 'Yokohama'}
+                        ]
+                    }
+                ]);
+
+                const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+                const lazyItems = ref(Array.from({ length: 1000 }));
+
+                return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
+            },
+            loadLazyTimeout: null,
+            methods: {
+                onLazyLoad(event) {
+                    this.loading = true;
+
+                    if (this.loadLazyTimeout) {
+                        clearTimeout(this.loadLazyTimeout);
+                    }
+
+                    //imitate delay of a backend call
+                    this.loadLazyTimeout = setTimeout(() => {
+                        const { first, last } = event;
+                        const lazyItems = [...this.lazyItems];
+
+                        for (let i = first; i < last; i++) {
+                            lazyItems[i] = { label: \`Item #\${i}\`, value: i };
+                        }
+
+                        this.lazyItems = lazyItems;
+                        this.loading = false;
+                    }, Math.random() * 1000 + 250);
+                }
+            },
+            components: {
+                "p-dropdown": primevue.dropdown,
+                "p-skeleton": primevue.skeleton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-dropdown {
+            width: 14rem;
+        }
+
+        .country-item img{
+            width: 17px;
+            margin-right: 0.5rem;
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 9ac49646f..feaabfb9a 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -231,6 +231,52 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/quill/dist/quill.min.js"><\\/script>
+                    
+        <script src="https://unpkg.com/primevue@^3/editor/editor.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/tooltip/tooltip.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Default</h5>
+            <p-editor v-model="value1" editor-style="height: 320px"></p-editor>
+
+            <h5>Customized</h5>
+            <p-editor v-model="value2" editor-style="height: 320px">
+                <template v-slot:toolbar>
+                    <span class="ql-formats">
+                        <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                        <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                        <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                    </span>
+                </template>
+            </p-editor>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+        const Tooltip = primevue.tooltip;
+
+        const App = {
+            setup() {
+                const value1 = ref('<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>');
+                const value2 = ref('');
+
+                return { value1, value2 }
+            },
+            components: {
+                "p-editor": primevue.editor
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .directive("tooltip", Tooltip)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 47c91aac2..14cdf296a 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -718,6 +718,277 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
+        <script src="./CountryService.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <div class="p-fluid p-grid">
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext>
+                            <label for="inputtext">InputText</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label p-input-icon-left">
+                            <i class="pi pi-search"></i>
+                            <p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext>
+                            <label for="inputtext-left">Left Icon</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                    <span class="p-float-label p-input-icon-right">
+                            <i class="pi pi-search"></i>
+                            <p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext>
+                            <label for="inputtext-right">Right Icon</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
+                            <label for="autocomplete">AutoComplete</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-calendar id="calendar" v-model="value3"></p-calendar>
+                            <label for="calendar">Calendar</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-chips id="chips" v-model="value4"></p-chips>
+                            <label for="chips">Chips</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
+                            <label for="inputmask">InputMask</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber>
+                            <label for="inputnumber">InputNumber</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <div class="p-inputgroup">
+                            <span class="p-inputgroup-addon">
+                                <i class="pi pi-user"></i>
+                            </span>
+                            <span class="p-float-label">
+                                <p-inputtext id="inputgroup" type="text" v-model="value7" />
+                                <label for="inputgroup">InputGroup</label>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
+                                :option-group-children="['states', 'cities']"></p-cascadeselect>
+                            <label for="multiselect">CascadeSelect</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown>
+                            <label for="dropdown">Dropdown</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name">
+                            <label for="multiselect">MultiSelect</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect>
+                            <label for="treeselect">TreeSelect</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-password id="password" v-model="value11"></p-password>
+                            <label for="password">Password</label>
+                        </span>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <p-textarea id="textarea" v-model="value10" rows="3"></p-textarea>
+                            <label for="textarea">Textarea</label>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    countryService.value.getCountries().then(data => countries.value = data);
+                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
+                })
+                const countryService = ref(new CountryService());
+                const nodeService = ref(new NodeService());
+                const countries = ref();
+                const filteredCountries = ref();
+                const cities = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const value1 = ref();
+                const value2 = ref();
+                const value3 = ref();
+                const value4 = ref();
+                const value5 = ref();
+                const value6 = ref();
+                const value7 = ref();
+                const value8 = ref();
+                const value9 = ref();
+                const value10 = ref();
+                const value11 = ref();
+                const valueIconLeft = ref();
+                const valueIconRight = ref();
+                const selectedCity = ref();
+                const selectedNode = ref();
+                const nodes = ref();
+            const cascadeCountries = ref([
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                {cname: 'Sydney', code: 'A-SY'},
+                                {cname: 'Newcastle', code: 'A-NE'},
+                                {cname: 'Wollongong', code: 'A-WO'}
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                {cname: 'Brisbane', code: 'A-BR'},
+                                {cname: 'Townsville', code: 'A-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'Canada', 
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                {cname: 'Montreal', code: 'C-MO'},
+                                {cname: 'Quebec City', code: 'C-QU'}
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                {cname: 'Ottawa', code: 'C-OT'},
+                                {cname: 'Toronto', code: 'C-TO'}
+                            ]
+                        },
+                        
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                {cname: 'Los Angeles', code: 'US-LA'},
+                                {cname: 'San Diego', code: 'US-SD'},
+                                {cname: 'San Francisco', code: 'US-SF'}
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                {cname: 'Jacksonville', code: 'US-JA'},
+                                {cname: 'Miami', code: 'US-MI'},
+                                {cname: 'Tampa', code: 'US-TA'},
+                                {cname: 'Orlando', code: 'US-OR'}
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                                cities: [
+                                    {cname: 'Austin', code: 'US-AU'},
+                                    {cname: 'Dallas', code: 'US-DA'},
+                                    {cname: 'Houston', code: 'US-HO'}
+                                ]
+                            }
+                        ]
+                    }
+                ]);
+
+                const searchCountry = (event) => {
+                    setTimeout(() => {
+                        if (!event.query.trim().length) {
+                            filteredCountries.value = [...countries.value];
+                        }
+                        else {
+                            filteredCountries.value = countries.value.filter((country) => {
+                                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                            });
+                        }
+                    }, 250);
+                };
+
+                return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6, 
+                    value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry,
+                    nodes, selectedNode }
+            },
+            components: {
+                "p-inputtext": primevue.inputtext,
+                "p-inputnumber": primevue.inputnumber,
+                "p-autocomplete": primevue.autocomplete,
+                "p-calendar": primevue.calendar,
+                "p-chips": primevue.chips,
+                "p-inputmask": primevue.inputmask,
+                "p-cascadeselect": primevue.cascadeselect,
+                "p-dropdown": primevue.dropdown,
+                "p-multiselect": primevue.multiselect,
+                "p-treeselect": primevue.treeselect,
+                "p-password": primevue.password,
+                "p-textarea": primevue.textarea
+            }
+        };
+        
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue
index 3419da869..9f1f2f2bd 100755
--- a/src/views/inputgroup/InputGroupDoc.vue
+++ b/src/views/inputgroup/InputGroupDoc.vue
@@ -252,6 +252,140 @@ export default {
     }
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Addons</h5>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-user"></i>
+                        </span>
+                        <p-inputtext placeholder="Username"></p-inputtext>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">$</span>
+                        <p-inputtext placeholder="Price"></p-inputtext>
+                        <span class="p-inputgroup-addon">.00</span>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">W</span>
+                        <p-inputtext placeholder="Website"></p-inputtext>
+                    </div>
+                </div>
+            </div>
+
+            <h5>Multiple Addons</h5>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-clock"></i>
+                        </span>
+                        <span class="p-inputgroup-addon">
+                            <i class="pi pi-star"></i>
+                        </span>
+                        <p-inputtext placeholder="Price"></p-inputtext>
+                        <span class="p-inputgroup-addon">$</span>
+                        <span class="p-inputgroup-addon">.00</span>
+                    </div>
+                </div>
+            </div>
+
+            <h5>Button Addons</h5>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <p-button label="Search"></p-button>
+                        <p-inputtext placeholder="Keyword"></p-inputtext>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <p-inputtext placeholder="Keyword"></p-inputtext>
+                        <p-button icon="pi pi-search" class="p-button-warning"></p-button>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="p-inputgroup">
+                        <p-button icon="pi pi-check" class="p-button-success"></p-button>
+                        <p-inputtext placeholder="Vote"></p-inputtext>
+                        <p-button icon="pi pi-times" class="p-button-danger"></p-button>
+                    </div>
+                </div>
+            </div>
+
+            <h5>Checkbox and RadioButton</h5>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-12">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <p-checkbox v-model="checked1" :binary="true"></p-checkbox>
+                        </span>
+                        <p-inputtext placeholder="Username"></p-inputtext>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-12">
+                    <div class="p-inputgroup">
+                        <p-inputtext placeholder="Price"></p-inputtext>
+                        <span class="p-inputgroup-addon">
+                            <p-radiobutton name="rb1" value="rb1" v-model="radioValue1"></p-radiobutton>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="p-col-12 p-md-12">
+                    <div class="p-inputgroup">
+                        <span class="p-inputgroup-addon">
+                            <p-checkbox v-model="checked2" :binary="true"></p-checkbox>
+                        </span>
+                        <p-inputtext placeholder="Website"></p-inputtext>
+                        <span class="p-inputgroup-addon">
+                            <p-radiobutton name="rb2" value="rb2" v-model="radioValue2"></p-radiobutton>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const checked1 = ref(false);
+                const checked2 = ref(false);
+                const radioValue1 = ref('');
+                const radioValue2 = ref('');
+
+                return { checked1, checked2, radioValue1, radioValue2 }
+            },
+            components: {
+                "p-inputtext": primevue.inputtext,
+                "p-button": primevue.button,
+                "p-checkbox": primevue.checkbox,
+                "p-radiobutton": primevue.radiobutton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>`
                 }
             }
         }
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
index 704a8ae3d..3cc70d266 100755
--- a/src/views/inputmask/InputMaskDoc.vue
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -237,6 +237,69 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="p-fluid p-formgrid p-grid">
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="basic">Basic</label>
+                    <p-inputmask mask="99-999999" v-model="val1" placeholder="99-999999"></p-inputmask>
+                </div>
+
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="ssn">SSN</label>
+                    <p-inputmask mask="999-99-9999" v-model="val2" placeholder="999-99-9999"></p-inputmask>
+                </div>
+
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="date">Date</label>
+                    <p-inputmask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
+                </div>
+
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="Phone">Phone</label>
+                    <p-inputmask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999"></p-inputmask>
+                </div>
+
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="phoneext">Phone Ext</label>
+                    <p-inputmask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"></p-inputmask>
+                </div>
+
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="serial">Serial</label>
+                    <p-inputmask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999"></p-inputmask>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const val1 = ref();
+                const val2 = ref();
+                const val3 = ref();
+                const val4 = ref();
+                const val5 = ref();
+                const val6 = ref();
+
+                return { val1, val2, val3, val4, val5, val6 }
+            },
+            components: {
+                "p-inputmask": primevue.inputmask
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 2509fce7e..7ff2f422d 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -672,6 +672,152 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@version/inputnumber/inputnumber.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Numerals</h5>
+            <div class="p-fluid p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="integeronly">Integer Only</label>
+                    <p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="withoutgrouping">Without Grouping</label>
+                    <p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="minmaxfraction">Min-Max Fraction Digits</label>
+                    <p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="minmax">Min-Max Boundaries</label>
+                    <p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
+                </div>
+
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-user">User Locale</label>
+                    <p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-us">United States Locale</label>
+                    <p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-german">German Locale</label>
+                    <p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-indian">Indian Locale</label>
+                    <p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
+                </div>
+            </div>
+
+            <h5>Currency</h5>
+            <div class="p-grid p-fluid">
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-us">United States</label>
+                    <p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-germany">Germany</label>
+                    <p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-india">India</label>
+                    <p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-japan">Japan</label>
+                    <p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
+                </div>
+            </div>
+
+            <h5>Prefix and Suffix</h5>
+            <div class="p-grid p-fluid">
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="mile">Mile</label>
+                    <p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="percent">Percent</label>
+                    <p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="expiry">Expiry</label>
+                    <p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="temperature">Temperature</label>
+                    <p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
+                </div>
+            </div>
+
+            <h5>Buttons</h5>
+            <div class="p-grid p-fluid">
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="stacked">Stacked</label>
+                    <p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="horizontal">Horizontal with Step</label>
+                    <p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
+                        decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="minmax-buttons">Min-Max Boundaries</label>
+                    <p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
+                </div>
+            </div>
+
+            <div class="p-field p-col-12 p-md-3">
+                <label for="vertical" style="display: block">Vertical</label>
+                <p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
+                    decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref(42723);
+                const value2 = ref(58151);
+                const value3 = ref(2351.35);
+                const value4 = ref(50);
+                const value5 = ref(151351);
+                const value6 = ref(115744);
+                const value7 = ref(635524);
+                const value8 = ref(732762);
+                const value9 = ref(1500);
+                const value10 = ref(2500);
+                const value11 = ref(4250);
+                const value12 = ref(5002);
+                const value13 = ref(20);
+                const value14 = ref(50);
+                const value15 = ref(10);
+                const value16 = ref(20);
+                const value17 = ref(20);
+                const value18 = ref(10.50);
+                const value19 = ref(25);
+                const value20 = ref(50);
+
+                return { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10,
+                    value11, value12, value13, value14, value15, value16, value17, value18, value19, value20 }
+            },
+            components: {
+                "p-inputnumber": primevue.inputnumber
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index e9348a61b..93edb0928 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -202,6 +202,39 @@ export default {
     }
 }
 <\\/script>
+`
+				},
+				'browser-source': {
+					tabName: 'Browser Source',
+					imports: `<script src="https://unpkg.com/primevue@^3/inputswitch/inputswitch.min.js"><\\/script>`,
+					content: `
+		<div id="app">
+			<h5>Basic</h5>
+			<p-inputswitch v-model="checked1"></p-inputswitch>
+
+			<h5>Preselection</h5>
+			<p-inputswitch v-model="checked2"></p-inputswitch>
+		</div>
+
+		<script>
+		const { createApp, ref } = Vue;
+
+		const App = {
+			setup() {
+				const checked1 = ref(false);
+				const checked2 = ref(true);
+
+				return { checked1, checked2 }
+			},
+			components: {
+				"p-inputswitch": primevue.inputswitch
+			}
+		};
+
+		createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+		<\\/script>
 `
 				}
 			}
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index c14ff4539..c34980133 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -317,6 +317,98 @@ export default {
     display: block;
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@version/inputtext/inputtext.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="card">
+                <h5>Basic</h5>
+                <p-inputtext type="text" v-model="value1"></p-inputtext>
+                <span :style="{marginLeft: '.5em'}">{{value1}}</span>
+
+                <h5>Floating Label</h5>
+                <span class="p-float-label">
+                    <p-inputtext id="username" type="text" v-model="value2"></p-inputtext>
+                    <label for="username">Username</label>
+                </span>
+
+                <h5>Left Icon</h5>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search"></i>
+                    <p-inputtext type="text" v-model="value3" placeholder="Search"></p-inputtext>
+                </span>
+
+                <h5>Right Icon</h5>
+                <span class="p-input-icon-right">
+                    <i class="pi pi-spin pi-spinner"></i>
+                    <p-inputtext type="text" v-model="value4"></p-inputtext>
+                </span>
+
+                <h5>Help Text</h5>
+                <div class="p-field">
+                    <label for="username1">Username</label>
+                    <p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext>
+                    <small id="username1-help">Enter your username to reset your password.</small>
+                </div>
+
+                <h5>Invalid</h5>
+                <div class="p-field">
+                    <label for="username2">Username</label>
+                    <p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext>
+                    <small id="username2-help" class="p-error">Username is not available.</small>
+                </div>
+
+                <h5>Disabled</h5>
+                <p-inputtext type="text" v-model="value5" disabled></p-inputtext>
+
+                <h5>Sizes</h5>
+                <div class="sizes">
+                    <p-inputtext type="text" class="p-inputtext-sm" placeholder="Small"></p-inputtext>
+                    <p-inputtext type="text" placeholder="Normal"></p-inputtext>
+                    <p-inputtext type="text" class="p-inputtext-lg"  placeholder="Large"></p-inputtext>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+            const { createApp, ref } = Vue;
+
+            const App = {
+                setup() {
+                    const value1 = ref();
+                    const value2 = ref();
+                    const value3 = ref();
+                    const value4 = ref();
+                    const value5 = ref('PrimeVue');
+
+                    return { value1, value2, value3, value4, value5 }
+                },
+                components: {
+                    "p-inputtext": primevue.inputtext
+                }
+            };
+
+            createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+            .sizes .p-inputtext {
+                display: block;
+                margin-bottom: .5rem;
+            }
+
+            .sizes:last-child {
+                margin-bottom: 0;
+            }
+
+            .p-field * {
+                display: block;
+            }
+        </style>`
                 }
             }
         }
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index af5ff5ed6..15b73984e 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -522,6 +522,213 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName :'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
+        <script src="./CountryService.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="p-fluid p-grid">
+                <div class="p-field p-col-12 p-md-4">
+                    <p-inputtext id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid"></p-inputtext>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid"></p-autocomplete>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :show-icon="true"></p-calendar>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid"></p-chips>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy" placeholder="InputMask" class="p-invalid"></p-inputmask>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-inputnumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid"></p-inputnumber>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-cascadeselect v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
+                        :option-group-children="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid"></p-cascadeselect>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-dropdown id="dropdown" v-model="value7" :options="cities" option-label="name" placeholder="Dropdown" class="p-invalid"></p-dropdown>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-multiselect id="multiselect" v-model="value8" :options="cities" option-label="name" placeholder="MultiSelect" class="p-invalid"></p-multiselect>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-treeselect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></p-treeselect>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-password id="password" v-model="value10" placeholder="Password" class="p-invalid"></p-password>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <p-textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid"></p-textarea>
+                </div>
+            </div>
+        </div>                   
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    countryService.value.getCountries().then(data => countries.value = data);
+                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
+                })
+                const countryService = ref(new CountryService());
+                const nodeService = ref(new NodeService());
+                const countries = ref();
+                const filteredCountries = ref();
+                const cities = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const value1 = ref();
+                const value2 = ref();
+                const value3 = ref();
+                const value4 = ref();
+                const value5 = ref();
+                const value6 = ref();
+                const value7 = ref();
+                const value8 = ref();
+                const value9 = ref();
+                const value10 = ref();
+                const selectedCity = ref();
+                const selectedNode = ref();
+                const nodes = ref();
+                const cascadeCountries = ref([
+                    {
+                        name: 'Australia',
+                        code: 'AU',
+                        states: [
+                            {
+                                name: 'New South Wales',
+                                cities: [
+                                    {cname: 'Sydney', code: 'A-SY'},
+                                    {cname: 'Newcastle', code: 'A-NE'},
+                                    {cname: 'Wollongong', code: 'A-WO'}
+                                ]
+                            },
+                            {
+                                name: 'Queensland',
+                                cities: [
+                                    {cname: 'Brisbane', code: 'A-BR'},
+                                    {cname: 'Townsville', code: 'A-TO'}
+                                ]
+                            },
+                            
+                        ]
+                    },
+                    {
+                        name: 'Canada', 
+                        code: 'CA',
+                        states: [
+                            {
+                                name: 'Quebec',
+                                cities: [
+                                    {cname: 'Montreal', code: 'C-MO'},
+                                    {cname: 'Quebec City', code: 'C-QU'}
+                                ]
+                            },
+                            {
+                                name: 'Ontario',
+                                cities: [
+                                    {cname: 'Ottawa', code: 'C-OT'},
+                                    {cname: 'Toronto', code: 'C-TO'}
+                                ]
+                            },
+                            
+                        ]
+                    },
+                    {
+                        name: 'United States',
+                        code: 'US',
+                        states: [
+                            {
+                                name: 'California',
+                                cities: [
+                                    {cname: 'Los Angeles', code: 'US-LA'},
+                                    {cname: 'San Diego', code: 'US-SD'},
+                                    {cname: 'San Francisco', code: 'US-SF'}
+                                ]
+                            },
+                            {
+                                name: 'Florida',
+                                cities: [
+                                    {cname: 'Jacksonville', code: 'US-JA'},
+                                    {cname: 'Miami', code: 'US-MI'},
+                                    {cname: 'Tampa', code: 'US-TA'},
+                                    {cname: 'Orlando', code: 'US-OR'}
+                                ]
+                            },
+                            {
+                                name: 'Texas',
+                                cities: [
+                                    {cname: 'Austin', code: 'US-AU'},
+                                    {cname: 'Dallas', code: 'US-DA'},
+                                    {cname: 'Houston', code: 'US-HO'}
+                                ]
+                            }
+                        ]
+                    }
+                ]);
+
+                const searchCountry = (event) => {
+                    setTimeout(() => {
+                        if (!event.query.trim().length) {
+                            filteredCountries.value = [...countries.value];
+                        }
+                        else {
+                            filteredCountries.value = countries.value.filter((country) => {
+                                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                            });
+                        }
+                    }, 250);
+                }
+
+                return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, 
+                    value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry,
+                    nodes, selectedNode  }
+
+            },
+            components: {
+                "p-inputtext": primevue.inputtext,
+                "p-autocomplete": primevue.autocomplete,
+                "p-calendar": primevue.calendar,
+                "p-chips": primevue.chips,
+                "p-inputmask": primevue.inputmask,
+                "p-inputnumber": primevue.inputnumber,
+                "p-cascadeselect": primevue.cascadeselect,
+                "p-dropdown": primevue.dropdown,
+                "p-multiselect": primevue.multiselect,
+                "p-treeselect": primevue.treeselect,
+                "p-textarea": primevue.textarea,
+                "p-password": primevue.password
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
 `
                 }
             }
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
index 8b8cbc35d..410473172 100644
--- a/src/views/knob/KnobDoc.vue
+++ b/src/views/knob/KnobDoc.vue
@@ -339,6 +339,79 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <div class="p-grid p-formgrid p-text-center">
+                <div class="p-field p-col-12 p-md-4">
+                    <h5>Basic</h5>
+                    <p-knob v-model="value1"></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5>Readonly</h5>
+                    <p-knob v-model="value2" readonly></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5>Disabled</h5>
+                    <p-knob v-model="value3" disabled></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5 class="p-mt-3">Min/Max</h5>
+                    <p-knob v-model="value4" :min="-50" :max="50"></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5 class="p-mt-3">Step</h5>
+                    <p-knob v-model="value5" :step="10"></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5 class="p-mt-3">Template</h5>
+                    <p-knob v-model="value6" value-template="{value}%"></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5 class="p-mt-3">Stroke</h5>
+                    <p-knob v-model="value7" :stroke-width="5"></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5 class="p-mt-3">Size</h5>
+                    <p-knob v-model="value8" :size="200"></p-knob>
+                </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <h5 class="p-mt-3">Color</h5>
+                    <p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob>
+                </div>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref(0);
+                const value2 = ref(50);
+                const value3 = ref(75);
+                const value4 = ref(10);
+                const value5 = ref(40);
+                const value6 = ref(60);
+                const value7 = ref(40);
+                const value8 = ref(60);
+                const value9 = ref(50);
+
+                return { value1, value2, value3, value4, value5, value6, value7, value8, value9 }
+            },
+            components: {
+                "p-knob": primevue.knob
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index 81f2cb0f9..4f4bddd3c 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -562,6 +562,111 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/listbox/listbox.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Single</h5>
+            <p-listbox v-model="selectedCity" :options="cities" option-label="name" style="width:15rem"></p-listbox>
+
+            <h5>Grouped</h5>
+            <p-listbox v-model="selectedGroupedCity" :options="groupedCities" option-label="label" style="width:15rem" option-group-label="label" option-group-children="items" list-style="max-height:250px">
+                <template #optiongroup="slotProps">
+                    <div class="p-d-flex p-ai-center country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                        <div>{{slotProps.option.label}}</div>
+                    </div>
+                </template>
+            </p-listbox>
+
+        <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
+        <p-listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" option-label="name" list-style="max-height:250px" style="width:15rem" filter-placeholder="Search">
+            <template #option="slotProps">
+                <div class="country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                    <div>{{slotProps.option.name}}</div>
+                </div>
+            </template>
+        </p-listbox>
+
+            <h5>Virtual Scroll (1000 Items)</h5>
+            <p-listbox v-model="selectedItem" :options="items" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 31 }" style="width:15rem" list-style="height:250px"></p-listbox>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const selectedCity = ref();
+                const selectedCountries = ref();
+                const selectedGroupedCity = ref();
+                const selectedItem = ref();
+                const cities = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const countries = ref([
+                    {name: 'Australia', code: 'AU'},
+                    {name: 'Brazil', code: 'BR'},
+                    {name: 'China', code: 'CN'},
+                    {name: 'Egypt', code: 'EG'},
+                    {name: 'France', code: 'FR'},
+                    {name: 'Germany', code: 'DE'},
+                    {name: 'India', code: 'IN'},
+                    {name: 'Japan', code: 'JP'},
+                    {name: 'Spain', code: 'ES'},
+                    {name: 'United States', code: 'US'}
+                ]);
+                const groupedCities = ref([
+                    {
+                        label: 'Germany', code: 'DE',
+                        items: [
+                            {label: 'Berlin', value: 'Berlin'},
+                            {label: 'Frankfurt', value: 'Frankfurt'},
+                            {label: 'Hamburg', value: 'Hamburg'},
+                            {label: 'Munich', value: 'Munich'}
+                        ]
+                    },
+                    {
+                        label: 'USA', code: 'US',
+                        items: [
+                            {label: 'Chicago', value: 'Chicago'},
+                            {label: 'Los Angeles', value: 'Los Angeles'},
+                            {label: 'New York', value: 'New York'},
+                            {label: 'San Francisco', value: 'San Francisco'}
+                        ]
+                    },
+                    {
+                        label: 'Japan', code: 'JP',
+                        items: [
+                            {label: 'Kyoto', value: 'Kyoto'},
+                                {label: 'Osaka', value: 'Osaka'},
+                                {label: 'Tokyo', value: 'Tokyo'},
+                                {label: 'Yokohama', value: 'Yokohama'}
+                            ]
+                        }
+                    ]);
+
+                const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+
+                return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
+            },
+            components: {
+                "p-listbox": primevue.listbox
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 722ba52c4..fa9d777cc 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -836,6 +836,165 @@ export default {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-multiselect v-model="selectedCities1" :options="cities" option-label="name" placeholder="Select Cities"></p-multiselect>
+
+            <h5>Chips</h5>
+            <p-multiselect v-model="selectedCities2" :options="cities" option-label="name" placeholder="Select Cities" display="chip"></p-multiselect>
+
+            <h5>Grouped</h5>
+            <p-multiselect v-model="selectedGroupedCities" :options="groupedCities" option-label="label"  option-group-label="label" option-group-children="items" placeholder="Select Cities">
+                <template #optiongroup="slotProps">
+                    <div class="p-d-flex p-ai-center country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                        <div>{{slotProps.option.label}}</div>
+                    </div>
+                </template>
+            </p-multiselect >
+
+            <h5>Advanced with Templating and Filtering</h5>
+            <p-multiselect  v-model="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
+                <template #value="slotProps">
+                    <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                        <div>{{option.name}}</div>
+                    </div>
+                    <template v-if="!slotProps.value || slotProps.value.length === 0">
+                        Select Countries
+                    </template>
+                </template>
+                <template #option="slotProps">
+                    <div class="country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                        <div>{{slotProps.option.name}}</div>
+                    </div>
+                </template>
+            </p-multiselect >
+
+            <h5>Loading State</h5>
+            <p-multiselect  placeholder="Loading..." loading></p-multiselect >
+
+            <h5>Virtual Scroll (1000 Items)</h5>
+            <p-multiselect  v-model="selectedItems" :options="items" :max-selected-labels="3" :select-all="selectAll" @selectall-change="onSelectAllChange($event)" @change="onChange($event)" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 34 }" placeholder="Select Item"></p-multiselect>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const selectedCities1 = ref();
+                const selectedCities2 = ref();
+                const selectedCountries = ref();
+                const selectedGroupedCities = ref();
+                const selectedItems = ref();
+                const selectAll = ref(false);
+                const cities = ref([
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ]);
+                const countries = ref([
+                    {name: 'Australia', code: 'AU'},
+                    {name: 'Brazil', code: 'BR'},
+                    {name: 'China', code: 'CN'},
+                    {name: 'Egypt', code: 'EG'},
+                    {name: 'France', code: 'FR'},
+                    {name: 'Germany', code: 'DE'},
+                    {name: 'India', code: 'IN'},
+                    {name: 'Japan', code: 'JP'},
+                    {name: 'Spain', code: 'ES'},
+                    {name: 'United States', code: 'US'}
+                ]);
+                const groupedCities = ref([
+                    {
+                        label: 'Germany', code: 'DE',
+                        items: [
+                            {label: 'Berlin', value: 'Berlin'},
+                            {label: 'Frankfurt', value: 'Frankfurt'},
+                            {label: 'Hamburg', value: 'Hamburg'},
+                            {label: 'Munich', value: 'Munich'}
+                        ]
+                    },
+                    {
+                        label: 'USA', code: 'US',
+                        items: [
+                            {label: 'Chicago', value: 'Chicago'},
+                            {label: 'Los Angeles', value: 'Los Angeles'},
+                            {label: 'New York', value: 'New York'},
+                            {label: 'San Francisco', value: 'San Francisco'}
+                        ]
+                    },
+                    {
+                        label: 'Japan', code: 'JP',
+                        items: [
+                            {label: 'Kyoto', value: 'Kyoto'},
+                            {label: 'Osaka', value: 'Osaka'},
+                            {label: 'Tokyo', value: 'Tokyo'},
+                            {label: 'Yokohama', value: 'Yokohama'}
+                        ]
+                    }
+                ]);
+                const items = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
+
+                return { selectedCities1, selectedCities2, selectedCountries, selectedGroupedCities, cities, countries, groupedCities, items, selectedItems, selectAll }
+            },
+            methods: {
+                onSelectAllChange(event) {
+                    this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
+                    this.selectAll = event.checked;
+                },
+                onChange(event) {
+                    this.selectAll = event.value.length === this.items.length
+                }
+            },
+            components: {
+                "p-multiselect": primevue.multiselect
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-multiselect {
+            width: 18rem;
+        }
+
+        .multiselect-custom .p-multiselect-label:not(.p-placeholder) {
+            padding-top: .25rem;
+            padding-bottom: .25rem;
+        }
+
+        .multiselect-custom .country-item-value {
+            padding: .25rem .5rem;
+            border-radius: 3px;
+            display: inline-flex;
+            margin-right: .5rem;
+            background-color: var(--primary-color);
+            color: var(--primary-color-text);
+        }
+
+        .multiselect-custom .country-item-value img.flag {
+            width: 17px;
+        }
+
+        @media screen and (max-width: 640px) {
+            .p-multiselect {
+                width: 100%;
+            }
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index febcb72b0..2bf09e908 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -350,6 +350,70 @@ export default {
     width: 15rem
 }
 </style>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/divider/divider.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-password v-model="value1" :feedback="false"></p-password>
+
+            <h5>p-password Meter</h5>
+            <p-password v-model="value2"></p-password>
+
+            <h5>Show p-password</h5>
+            <p-password v-model="value3" toggle-mask></p-password>
+
+            <h5>Templating</h5>
+            <p-password v-model="value4">
+                <template #header>
+                    <h6>Pick a password</h6>
+                </template>
+                <template #footer="sp">
+                    {{sp.level}}
+                    <p-divider></p-divider>
+                    <p class="p-mt-2">Suggestions</p>
+                    <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                        <li>At least one lowercase</li>
+                        <li>At least one uppercase</li>
+                        <li>At least one numeric</li>
+                        <li>Minimum 8 characters</li>
+                    </ul>
+                </template>
+            </p-password>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref();
+                const value2 = ref();
+                const value3 = ref();
+                const value4 = ref();
+
+                return { value1, value2, value3, value4 }
+            },
+            components: {
+                "p-password": primevue.password,
+                "p-divider": primevue.divider
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-password input {
+            width: 15rem
+        }
+        </style>
 `
                 }
             }
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 7cbfff2c5..5c3e098f3 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -244,6 +244,63 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <div class="p-field-radiobutton">
+                <p-radiobutton id="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
+                <label for="city1">Chicago</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radiobutton id="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
+                <label for="city2">Los Angeles</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radiobutton id="city3" name="city" value="New York" v-model="city"></p-radiobutton>
+                <label for="city3">New York</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radiobutton id="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
+                <label for="city4">San Francisco</label>
+            </div>
+
+            <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
+            <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+                <p-radiobutton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
+                <label :for="category.key">{{category.name}}</label>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const city = ref();
+                const categories = ref([
+                    {name: 'Accounting', key: 'A'}, 
+                    {name: 'Marketing', key: 'M'}, 
+                    {name: 'Production', key: 'P'}, 
+                    {name: 'Research', key: 'R'}
+                ]);
+                const selectedCategory = ref(categories.value[1]);
+
+                return { city, categories, selectedCategory }
+            },
+            components: {
+                "p-radiobutton": primevue.radiobutton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index 67e0bdb38..baa6b1f8f 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -264,6 +264,59 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Single Selection</h5>
+            <p-selectbutton v-model="value1" :options="options"></p-selectbutton>
+
+            <h5>Multiple Selection</h5>
+            <p-selectbutton v-model="value2" :options="paymentOptions" option-label="name" multiple></p-selectbutton>
+
+            <h5>Custom Content</h5>
+            <p-selectbutton v-model="value3" :options="justifyOptions" dataKey="value">
+                <template #option="slotProps">
+                    <i :class="slotProps.option.icon"></i>
+                </template>
+            </p-selectbutton>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref('Off');
+                const value2 = ref();
+                const value3 = ref();
+                const options = ref(['Off', 'On']);
+                const paymentOptions = ref([
+                    {name: 'Option 1', value: 1},
+                    {name: 'Option 2', value: 2},
+                    {name: 'Option 3', value: 3}
+                ]);
+                const justifyOptions = ref([
+                    {icon: 'pi pi-align-left', value: 'left'},
+                    {icon: 'pi pi-align-right', value: 'Right'},
+                    {icon: 'pi pi-align-center', value: 'Center'},
+                    {icon: 'pi pi-align-justify', value: 'Justify'}
+                ]);
+
+                return { value1, value2, value3, options, paymentOptions, justifyOptions }
+            },
+            components: {
+                "p-selectbutton": primevue.selectbutton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index dbf4a98cc..164f790ee 100755
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -1,9 +1,16 @@
 <template>
 	<AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue" >
-        <h5>Import</h5>
+        <h5>Import via Module</h5>
 <pre v-code.script><code>
 import Slider from 'primevue/slider';
 
+</code></pre>
+
+        <h5>Import via CDN</h5>
+<pre v-code><code>
+&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt;
+
 </code></pre>
 
 		<h5>Getting Started</h5>
@@ -279,6 +286,65 @@ export default {
      height: 14rem;
 }
 </style>`
+                },
+                'browser-source': {
+                    imports: `<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"><\\/script>`,
+                    tabName: 'Browser Source',
+                    content: `
+        <div id="app">
+            <h5>Basic: {{value1}}</h5>
+            <p-slider v-model="value1"></p-slider>
+
+            <h5>Input: {{value2}}</h5>
+            <p-inputtext v-model.number="value2"></p-inputtext>
+            <p-slider v-model="value2"></p-slider>
+
+            <h5>Step: {{value3}}</h5>
+            <p-slider v-model="value3" :step="20"></p-slider>
+
+            <h5>Decimal Step: {{value4}}</h5>
+            <p-slider v-model="value4" :step="0.5"></p-slider>
+
+            <h5>Range: {{value5}}</h5>
+            <p-slider v-model="value5" :range="true"></p-slider>
+
+            <h5>Vertical: {{value6}}</h5>
+            <p-slider v-model="value6" orientation="vertical"></p-slider>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref(null);
+                const value2 = ref(50);
+                const value3 = ref(20);
+                const value4 = ref(30.5);
+                const value5 = ref([20,80]);
+                const value6 = ref(50);
+
+                return { value1, value2, value3, value4, value5, value6 }
+            },
+            components: {
+                "p-slider": primevue.slider,
+                "p-inputtext": primevue.inputtext
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style scoped>
+        .p-slider-horizontal, .p-inputtext {
+            width: 14rem;
+        }
+        .p-slider-vertical {
+            height: 14rem;
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue
index 716d445ce..973c50950 100755
--- a/src/views/textarea/TextareaDoc.vue
+++ b/src/views/textarea/TextareaDoc.vue
@@ -139,6 +139,43 @@ export default {
     }
 }
 <\\/script>
+`
+				},
+                'browser-source': {
+					tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-textarea v-model="value1" rows="5" cols="30"></p-textarea>
+
+            <h5>Auto Resize</h5>
+            <p-textarea v-model="value2" :autoResize="true" rows="5" cols="30"></p-textarea>
+
+            <h5>Disabled</h5>
+            <p-textarea v-model="value3" disabled rows="5" cols="30"></p-textarea>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value1 = ref('');
+                const value2 = ref('');
+                const value3 = ref('');
+
+                return { value1, value2, value3 }
+            },
+            components: {
+                "p-textarea": primevue.textarea
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
 				}
 			}
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index f4ae66f01..a3fffdc38 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -192,6 +192,39 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-togglebutton v-model="checked1" on-icon="pi pi-check" off-icon="pi pi-times"></p-togglebutton>
+
+            <h5>Customized</h5>
+            <p-togglebutton v-model="checked2" on-label="I confirm" off-label="I reject" on-icon="pi pi-check" off-icon="pi pi-times" style="width: 10em"></p-togglebutton>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const checked1 = ref(false);
+                const checked2 = ref(true);
+
+                return { checked1, checked2 }
+            },
+            components: {
+                "p-togglebutton": primevue.togglebutton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/treeselect/TreeSelectDoc.vue b/src/views/treeselect/TreeSelectDoc.vue
index 4f75eb8ca..3256d5b83 100644
--- a/src/views/treeselect/TreeSelectDoc.vue
+++ b/src/views/treeselect/TreeSelectDoc.vue
@@ -577,17 +577,17 @@ import NodeService from './service/NodeService';
 export default {
     setup() {
          onMounted(() => {
-            nodeService.value.getTreeNodes().then(data => options.value = data);
+            nodeService.value.getTreeNodes().then(data => nodes.value = data);
         });
 
-        const options = ref();
+        const nodes = ref();
         const nodeService = ref(new NodeService());
 
         const selectedNode = ref();
         const selectedNodes1 = ref();
         const selectedNodes2 = ref();
 
-        return { options, selectedNode, selectedNodes1, selectedNodes2 };
+        return { nodes, selectedNode, selectedNodes1, selectedNodes2 };
     }
 }
 <\\/script>
@@ -603,6 +603,62 @@ export default {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Single</h5>
+            <p-treeselect v-model="selectedNode" :options="nodes" placeholder="Select Item"></p-treeselect>
+
+            <h5>Multiple</h5>
+            <p-treeselect v-model="selectedNodes1" :options="nodes" selection-mode="multiple" :meta-key-selection="false" placeholder="Select Items"></p-treeselect>
+
+            <h5>Checkbox</h5>
+            <p-treeselect v-model="selectedNodes2" :options="nodes" display="chip" selection-mode="checkbox" placeholder="Select Items"></p-treeselect>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
+                });
+
+                const nodes = ref();
+                const nodeService = ref(new NodeService());
+
+                const selectedNode = ref();
+                const selectedNodes1 = ref();
+                const selectedNodes2 = ref();
+
+                return { nodes, selectedNode, selectedNodes1, selectedNodes2 };
+            },
+            components: {
+                "p-treeselect": primevue.treeselect
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-treeselect {
+            width:20rem;
+        }
+
+        @media screen and (max-width: 640px) {
+            .p-treeselect {
+                width: 100%;
+            }
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index ad5e01f3a..8c89b3f0e 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -138,6 +138,37 @@ export default {
     }
 }
 <\\/script>
+`
+				},
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/tristatecheckbox/tristatecheckbox.min.js"><\\/script>`,
+					content: `
+        <div id="app">
+            <div class="p-field-checkbox p-m-0">
+                <p-tristatecheckbox v-model="value"></p-tristatecheckbox>
+                <label>{{value == null ? 'null' : value}}</label>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const value = ref(null);
+
+                return { value }
+            },
+            components: {
+                "p-tristatecheckbox": primevue.tristatecheckbox
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
 				}
 			}