tag:blogger.com,1999:blog-57962535328994941252024-02-18T17:36:37.307-08:00JUGGERNAUTSharing is caring :)JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.comBlogger75125tag:blogger.com,1999:blog-5796253532899494125.post-42732680461136006692020-06-14T06:03:00.003-07:002020-06-14T06:06:52.708-07:00Items unpinned from taskbar are back after restart on Windows 10 - Issue Fix<div dir="ltr" style="text-align: left;" trbidi="on">
If you are using the latest Windows 10 OS on your PC, you might have observed this behavior.<br />
<br />
Even if you unpinned the unwanted items from your taskbar, it's getting restored once you restart your pc.<br />
<br />
You can resolve this problem with a simple hack.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghziqFjbL-ngorJNlkJHs8IuH1WR2UHQnUpMVVH8SRIWIKRSYQfPW7MWcwjJfieRKVNb0XDs6ePKTSyJ-ohTeHZomuIUwmLMnsKcK4rv-ICzqK22UU3CA48us23U51DjhsT0CMmP6Smyc/s1600/win10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="302" data-original-width="837" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghziqFjbL-ngorJNlkJHs8IuH1WR2UHQnUpMVVH8SRIWIKRSYQfPW7MWcwjJfieRKVNb0XDs6ePKTSyJ-ohTeHZomuIUwmLMnsKcK4rv-ICzqK22UU3CA48us23U51DjhsT0CMmP6Smyc/s400/win10.PNG" width="400" /></a></div>
<br />
Steps to solve the problem.<br />
<br />
Go to the user profile folder.<br />
Open the AppData (It might be hidden) / Local / Microsoft/ Windows/ Shell folder<br />
There you can find an XML file named "LayoutModification.xml"<br />
open the file in notepad and search for the "<taskbar:TaskbarPinList>" node<br />
remove the unwanted entries from the node children.<br />
<br />
That's it you have resolved the problem.<br />
you can restart and cross verify it.<br />
<br />
<br />
<br />
<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com1tag:blogger.com,1999:blog-5796253532899494125.post-42869529885756801112020-05-28T07:49:00.001-07:002020-05-28T07:59:05.596-07:00Deno first look, Hello world deno<div dir="ltr" style="text-align: left;" trbidi="on">
Please check the first look of deno, hello world, server creation using typescript, and running using brand new deno.<br />
<br />
Deno is the new runtime for JS & TS, developed by nodeJs team.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHSm-THFJBUrGYG_1cJ6wXMFpl51r-GoHVDdkuTALNkEqS3FIORkzBP9KImruR1ADlD2rheO1R2AmquP4EM6ljWO4vt8KHr_ZLwUCmgZpIx5VFqYtFVwA_9rRemogCCbcY2RK7ZjVPzoI/s1600/deno.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="803" data-original-width="1600" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHSm-THFJBUrGYG_1cJ6wXMFpl51r-GoHVDdkuTALNkEqS3FIORkzBP9KImruR1ADlD2rheO1R2AmquP4EM6ljWO4vt8KHr_ZLwUCmgZpIx5VFqYtFVwA_9rRemogCCbcY2RK7ZjVPzoI/s320/deno.JPG" width="320" /></a></div>
<br />
<br />
<br />
Video Tutorial<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/cYV7hypcVhU/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/cYV7hypcVhU?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
While creating a deno server from the documentation<br />
<br />
<b>deno run server.ts </b><br />
<br />
and once you ran you might have noticed below error.<br />
<br />
error: Uncaught PermissionDenied: network access to "0.0.0.0:8000", run again with the --allow-net flag<br />
<br />
to solve this<br />
<br />
run in this way, <b>deno run --allow-net .\server.ts</b>if the issue still persisting run it in this way.<br />
<br />
<b>deno run --allow-net .\server.ts http://localhost:8000/</b><br />
<b><br /></b>
<a href="https://deno.land/">https://deno.land/</a> </div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-34682152616480323232020-05-25T01:09:00.000-07:002020-05-25T01:09:21.376-07:00Create a collapsible grid view using VueJs<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">Steps to create a collapsible grid view using vuejs, </span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #030303; font-family: Roboto, Arial, sans-serif;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;">Technologies used
</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">VueJs with Typescript</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #030303; font-family: Roboto, Arial, sans-serif;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;">Vue CLI</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">HTML,</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">Typescript,</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">Javascript,</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">CSS,SCSS</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;"><br /></span></div>
<b><span style="color: red;">VIDEO TUTORIAL</span></b><br /><br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/afMSKENol_E/0.jpg" src="https://www.youtube.com/embed/afMSKENol_E?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurFBpjxd4JlaIdq835yU9VHwfRZyEwz1yWXLTNyNTJJAGlOtPILF7JF05EaJnKyuY5J1V1Id15TgiGhI1DqlXEujbHBQE7H7Qs2QExRKZk1nJxbu8GWM3UB62kBYISd4Z9UPUejZSYqE/s1600/collapsible_grid.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="858" data-original-width="1600" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurFBpjxd4JlaIdq835yU9VHwfRZyEwz1yWXLTNyNTJJAGlOtPILF7JF05EaJnKyuY5J1V1Id15TgiGhI1DqlXEujbHBQE7H7Qs2QExRKZk1nJxbu8GWM3UB62kBYISd4Z9UPUejZSYqE/s320/collapsible_grid.JPG" width="320" /></a></div>
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-67050391721382013612020-05-23T06:59:00.002-07:002020-05-23T07:00:40.096-07:00Create a portfolio site using vuepress<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: #f9f9f9; color: #030303; font-family: "roboto" , "arial" , sans-serif; font-size: 14px; white-space: pre-wrap;">How to create a portfolio using vuepress and vuejs,
Configure and setup vuepress, static content site using vuepress.</span><br />
<br />
<b>Video Tutorial</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/ZPdxIIcYaIY/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/ZPdxIIcYaIY?feature=player_embedded" width="320"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMN3MvU8t0xd287vPfJK-rzBYgd12Jmq2WUSDxhtLAnSxqHt0UiOUx2r1AzjJBIJBdZcT32mgjL-a1YGhFumEq_HQeKy0XwZlmwgH78Zbz9Olvz0OFS-Zoh-9t6wZYT3uMLMWZ5Lqz0VI/s1600/vuepress-portfolio.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="844" data-original-width="1600" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMN3MvU8t0xd287vPfJK-rzBYgd12Jmq2WUSDxhtLAnSxqHt0UiOUx2r1AzjJBIJBdZcT32mgjL-a1YGhFumEq_HQeKy0XwZlmwgH78Zbz9Olvz0OFS-Zoh-9t6wZYT3uMLMWZ5Lqz0VI/s320/vuepress-portfolio.JPG" width="320" /></a></div>
<b><br /></b></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-31911401715415228572020-05-16T04:01:00.000-07:002020-05-16T04:01:04.123-07:00Create a rich text editor component for your vuejs application<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">Steps to create a rich text editor using HTML, CSS typescript, javascript in vuejs app.</span><br />
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">API creation using d</span><span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">otnet core web API, and data stored to SQL Server.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcOxcagOEbAu3MRaGaY7LNuP0axoreZm_kz-fSoB0R1kv2NOToxXQxoVn-wzc9zxmjykVw-N7sPDBImAbOXNYTZXmr9CZ90Jq0yGd5j5eRg2o2jp5FfFfcBk0VOLuxPA8ARhamDNYleI/s1600/rich-text.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="727" data-original-width="1600" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcOxcagOEbAu3MRaGaY7LNuP0axoreZm_kz-fSoB0R1kv2NOToxXQxoVn-wzc9zxmjykVw-N7sPDBImAbOXNYTZXmr9CZ90Jq0yGd5j5eRg2o2jp5FfFfcBk0VOLuxPA8ARhamDNYleI/s400/rich-text.JPG" width="400" /></a></div>
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;">Video Tutorial</span><br />
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/JY2rTycejWc/0.jpg" src="https://www.youtube.com/embed/JY2rTycejWc?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<span style="background-color: white; color: rgba(0, 0, 0, 0.87); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space: pre-wrap;"><br /></span></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-18196513792824799212020-05-13T23:38:00.000-07:002020-05-13T23:38:09.755-07:00Create a web app using VueJS, Vue CLI<div dir="ltr" style="text-align: left;" trbidi="on">
Create your first web application using Vue js and Vue CLI.<br />
<br />
<b>Video Tutorial</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/jAiidrOMv2k/0.jpg" src="https://www.youtube.com/embed/jAiidrOMv2k?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-49267017739843034572020-05-09T21:47:00.001-07:002020-05-09T21:59:39.138-07:00Generate report in VueJs application using jsPdf<div dir="ltr" style="text-align: left;" trbidi="on">
Generate customized reports in VueJs application using jspdf, jspdf-autotable<br />
check out the video tutorial.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4HH2v4vNFtKHO3WK5B0V4z7w3JEP8PXcnQV4BBvfh-D54VNZWtfjsFpFL_54SRJU324XA1dADVfiRp0FfBP2WIqQDhVJr96vsLs6GuNMxBcVNwtPLTWjIoR4ygMxQORYcRGn2HLy870/s1600/report-generation.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="712" data-original-width="1600" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4HH2v4vNFtKHO3WK5B0V4z7w3JEP8PXcnQV4BBvfh-D54VNZWtfjsFpFL_54SRJU324XA1dADVfiRp0FfBP2WIqQDhVJr96vsLs6GuNMxBcVNwtPLTWjIoR4ygMxQORYcRGn2HLy870/s320/report-generation.JPG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: red;"><br /></span></b></div>
<b><span style="color: red;">Video Tutorial</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/gQ524ItsTJ8/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/gQ524ItsTJ8?feature=player_embedded" width="320"></iframe></div>
<br />
Technology stack:<br />
VueJs with Vue CLI<br />
Typescript<br />
jspdf, jspdf-autocomplete<br />
<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-15448921010855098982020-05-03T04:22:00.000-07:002020-05-03T04:22:34.829-07:00Submit a form using vuejs with autocomplete textbox<div dir="ltr" style="text-align: left;" trbidi="on">
Create a form using HTML, CSS, and typescript. submit it using REST API.<div>
the form contains text box input controls, dropdowns, number inputs, autoselect, calendar controls.</div>
<div>
<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiFgp3Bo89JDUxzYvR_X8ymgCfSgGUd4QSFfbXNNTGah_U2F94QhQOhDC5UOBfVNEVJziD2F30FdFjzboWizvf8MWnyiE240Wn4UbmDGyQ25mCmqKMBPRG_UWXrPTQJoCrCyMC4Nasxb0/s1600/autocomplete.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="752" data-original-width="1600" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiFgp3Bo89JDUxzYvR_X8ymgCfSgGUd4QSFfbXNNTGah_U2F94QhQOhDC5UOBfVNEVJziD2F30FdFjzboWizvf8MWnyiE240Wn4UbmDGyQ25mCmqKMBPRG_UWXrPTQJoCrCyMC4Nasxb0/s320/autocomplete.png" width="320" /></a></div>
<div>
<br /></div>
</div>
<div>
Video Tutorial</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/YNhvIQDYWxw/0.jpg" src="https://www.youtube.com/embed/YNhvIQDYWxw?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div>
<br /></div>
<div>
1) Vuejs</div>
<div>
2) VueCLI</div>
<div>
3) Dot net core web API</div>
<div>
4) Typescript, SCSS</div>
<div>
<br /></div>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-56445621171977125502020-05-02T22:24:00.002-07:002020-05-20T03:07:10.777-07:00Create dashboard using Apexcharts Vuejs<div dir="ltr" style="text-align: left;" trbidi="on">
Create a dashboard for your app using the apex chart in an easy way.<br /><b>Video Tutorial</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/9uYIc4IWJyc/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/9uYIc4IWJyc?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
1) Vuejs<br />
2) VueCLI<br />
3) Typescript<br />
4) Apexchart<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZyYZHT8py1j4ziL1Ts_jCYahbEodHNqSlBjl0X0YgFSDHRffyRm4OyynBt-sUjFAXZTXWqOb0-JSoWRpIBjvzyqM6jbTllEjeIADdV3EBFKlJ40rJU4lGntxq4CmwN3r6Fpny-2GZ7M/s1600/db.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="753" data-original-width="1600" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZyYZHT8py1j4ziL1Ts_jCYahbEodHNqSlBjl0X0YgFSDHRffyRm4OyynBt-sUjFAXZTXWqOb0-JSoWRpIBjvzyqM6jbTllEjeIADdV3EBFKlJ40rJU4lGntxq4CmwN3r6Fpny-2GZ7M/s320/db.JPG" width="320" /></a></div>
<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-35146644201794608842020-05-02T22:15:00.001-07:002020-05-02T22:15:32.529-07:00Create grid with pagination, filter using vuejs typescript<div dir="ltr" style="text-align: left;" trbidi="on">
Please check out the grid view created using HTML, CSS, and Typescript no third-party libraries.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/7xH318SraK0/0.jpg" src="https://www.youtube.com/embed/7xH318SraK0?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
1) Vue CLI<br />
2) Typescript<br />
3) Vue 2.6<br />
4) Axios<br />
5) .NET Core Web api.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3PfuwAJ-QAGGvHo24frA-bA9-VNIhtejDuojeT16eNKP5gq7Ln_VpKSplGaojyR1mVnSK65FYlH4Mj29tVKvU_QvGxIJ5UB4DrgXOWsVQWJHcHRZDcaiC_UKTSdR6iBwTZwSoeM6_8w/s1600/vjs.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="756" data-original-width="1600" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3PfuwAJ-QAGGvHo24frA-bA9-VNIhtejDuojeT16eNKP5gq7Ln_VpKSplGaojyR1mVnSK65FYlH4Mj29tVKvU_QvGxIJ5UB4DrgXOWsVQWJHcHRZDcaiC_UKTSdR6iBwTZwSoeM6_8w/s320/vjs.JPG" width="320" /></a></div>
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com1tag:blogger.com,1999:blog-5796253532899494125.post-33039180468626094262020-04-24T22:46:00.001-07:002020-04-24T22:46:32.024-07:00 Could not find a declaration file for module 'vuejs-datepicker'.<div dir="ltr" style="text-align: left;" trbidi="on">
Error Details:<br />
<br />
ERROR in path<br />
17:24 Could not find a declaration file for module 'vuejs-datepicker'.<br />
'C:/.../node_modules/vuejs-datepicker/dist/vuejs-datepicker.js' implicitly has an 'any' type.<br />
Try `npm install @types/vuejs-datepicker` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuejs-datepicker';`<br />
<br />
<br />
Scenario :<br />
<br />
Integrated vuejs-datepicker to your cue- cli, Vue with typescript project.<br />
<br />
<a href="https://www.npmjs.com/package/vuejs-datepicker">https://www.npmjs.com/package/vuejs-datepicker</a><br />
<br />
you might be observing a type error like could not find a declaration file for module 'vuejs-datepicker'<br />
<br />
So if you try to add the types from pm, it won't be able to find the same hence you will be getting the below error.<br />
<pre class="default prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #e7e8eb; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre class="lang-dart prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> code </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">E404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Not</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Found</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: var(--blue-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">GET</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> https</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="com" style="border: 0px; box-sizing: inherit; color: var(--black-400); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">//registry.npmjs.org/@types%2fvuejs-datepicker - Not found</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'@types/vuejs-datepicker@latest'</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: var(--blue-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">is</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> not </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: var(--blue-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">in</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> the npm registry</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">You</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> should bug the author to publish it </span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">or use the name yourself</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Note</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> that you can also install from a
npm </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ERR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">404</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> tarball</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> folder</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> http url</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> or git url</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span></code></pre>
</pre>
So the solution to the problem is you can add a declaration file, it can be any name eg.<br />
declarations.d.ts in the root of your src folder and the below line of code.<br />
<br />
<pre class="lang-dart prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre class="lang-dart prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">declare module </span><span class="str" style="border: 0px; box-sizing: inherit; color: var(--red-800); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vuejs-datepicker'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: var(--black-750); font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span></code></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlwj4wz5h5mrNQu0AejtwxizY2hoStaE9I_cIkM5d74taqt8FHzx4dDwUsusSxCr5cxVn2ta6_EJe6QFBQtTNiV5Pmx3r4IKCCRwrhln-r8MvzoO0NSpOMxNqY4qWyl_vstFc8q4qvVA/s1600/declaration.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="879" data-original-width="1600" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlwj4wz5h5mrNQu0AejtwxizY2hoStaE9I_cIkM5d74taqt8FHzx4dDwUsusSxCr5cxVn2ta6_EJe6QFBQtTNiV5Pmx3r4IKCCRwrhln-r8MvzoO0NSpOMxNqY4qWyl_vstFc8q4qvVA/s400/declaration.JPG" width="400" /></a></div>
<pre class="lang-dart prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;">
</pre>
</pre>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-83831969871023560392019-09-24T02:18:00.000-07:002019-09-27T11:38:45.266-07:00VueJs SignalR chat application with Dot net core.<div dir="ltr" style="text-align: left;" trbidi="on">
If you haven't used signalr in any of your application, Let me give a brief introduction about signalr with an example, In your application dashboard you want to display all the new notification message in realtime. what you will do?<br />
<div>
One approach you can do is constantly polling that particular method and check any updates available. </div>
<div>
In this case, you unnecessarily keep calling the backend method to get the information. It affects the performance of your application. here you can use signalr to provide real-time behavior.</div>
<div>
<br /></div>
<div>
So here I am explaining how we can create a simple chat application using signalr and vuejs.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3aYgrbuRfl8tz1-3R5pnPYOeZIFZ78XzBuUWdI3-yzNpY6z2qC5292CxmsHgy1h0GiVsfUI6NsIeGThbKXVdfBvd4lMpo1D1i4a7NIO_N7l9v-LhXl5V0tUfG2tfAM641FDy7KDhdn4/s1600/signalr.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="848" data-original-width="1600" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3aYgrbuRfl8tz1-3R5pnPYOeZIFZ78XzBuUWdI3-yzNpY6z2qC5292CxmsHgy1h0GiVsfUI6NsIeGThbKXVdfBvd4lMpo1D1i4a7NIO_N7l9v-LhXl5V0tUfG2tfAM641FDy7KDhdn4/s400/signalr.JPG" width="400" /></a></div>
<div>
<br /></div>
<div>
Pre requisites: Asp.net core</div>
<div>
IIS and WebSocket enabled - (windows features > IIS )</div>
<div>
<br /></div>
<div>
Here we are using asp.net core signalr. Its pretty simple and straight forward so I will just add the code part.</div>
<div>
<br />
<br />
<br />
<br />
<br />
Here I have browsed web application in two different browsers to create two chat instances.<br />
(ie & chrome)<br />
<br /></div>
<div>
You have to create a ChatHub and configure it in the startup class.</div>
<div>
<br /></div>
<div>
So my ChatHub class goes like this.</div>
<div>
<br /></div>
<div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ChatHub</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Hub</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">override</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Task</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">OnConnectedAsync</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Console</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">WriteLine</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"ChatHub hub connected"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">base</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">OnConnectedAsync</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">override</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Task</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">OnDisconnectedAsync</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Exception</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> exception</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Console</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">WriteLine</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"ChatHub hub disconnected"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">base</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">OnDisconnectedAsync</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">exception</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">async</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Task</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">SendMessage</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> message</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Console</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">WriteLine</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"Message received"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">await</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Clients</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">All</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">SendAsync</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"ReceiveMessage"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> message</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
</div>
<div>
<br /></div>
<div>
So here I am just broadcasting the received message to all subscribing clients.</div>
<div>
<br /></div>
<div>
In ConfigureServices method</div>
<div>
<br /></div>
<div>
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"> services.AddSignalR();</code></pre>
</div>
<div>
In the Configure method</div>
<div>
<br /></div>
<div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> app</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">UseSignalR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">hubRouteBuilder </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
hubRouteBuilder</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">MapHub</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">ChatHub</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"/signalr"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span></code></pre>
</div>
<div>
add the following codes, <b>bingo </b>your signalr app is ready to use.</div>
<div>
<br /></div>
<div>
Now we will check the web app part. I have created a vuecli app.</div>
<div>
There are other 'signalr' packages that compatible to dot net framework. but you need to use the below npm package if you are using dotnet core signalr.</div>
<div>
<br /></div>
<div>
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">"@aspnet/signalr":"1.1.4"</code></pre>
</div>
<div>
This package is used in our app for establishing the connection with signalr Hub.</div>
<div>
And the component for the same is below. It's straight forward code one method to invoke the signalr part and we are subscribing the data in the mounted hook.</div>
<div>
<br /></div>
<div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="tag" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><script</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="border: 0px; box-sizing: inherit; color: #e64320; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">lang</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="border: 0px; box-sizing: inherit; color: #0f74bd; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"ts"</span><span class="tag" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Inject</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vue-property-decorator'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">HelloWorld</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'@/components/HelloWorld.vue'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="com" style="border: 0px; box-sizing: inherit; color: #858c93; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// @ is an alias to /src</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">*</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> as signalR from </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'@aspnet/signalr'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="lit" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@Component</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
components</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">HelloWorld</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">},</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">})</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">export</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">default</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Home</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> extends </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> string </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">''</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> message</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> string </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">''</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> listMessage</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> any </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">[];</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> connection </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">new</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> signalR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">HubConnectionBuilder</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">withUrl</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'https://localhost:5001/signalr'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">build</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> mounted</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">connection</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">on</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'ReceiveMessage'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> string</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> string</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">const</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> insertdata </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> message</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">};</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">listMessage</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">push</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">insertdata</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="border: 0px; box-sizing: inherit; color: #858c93; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// tslint:disable-next-line:no-console</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
console</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">log</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">listMessage</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="border: 0px; box-sizing: inherit; color: #858c93; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// tslint:disable-next-line:no-console</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
console</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">log</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">SignalR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">if</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">connection</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">state </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">===</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> signalR</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">HubConnectionState</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Connected</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">connection</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">invoke</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'SendMessage'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">message</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">else</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">connection</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">start</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">then</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">connection</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">invoke</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'SendMessage'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">user</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">message</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">));</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Clear</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">listMessage </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">[];</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="tag" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></script></span></code></pre>
</div>
<div>
<br /></div>
<div>
Code for the same can be found in my git hub <a href="https://github.com/tonytomk/SignalRVueChatApp" target="_blank">repo</a>.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/3HQB70gK-go/0.jpg" src="https://www.youtube.com/embed/3HQB70gK-go?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
Youtube version </div>
<div>
<br /></div>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-79811418203613260302019-06-25T11:22:00.003-07:002019-06-25T20:41:26.434-07:00How to do instant filter using vuejs and typescript<div dir="ltr" style="text-align: left;" trbidi="on">
Suppose you have a grid/ table and you need filter the items in the table based on the input text you enter in the search field. This can be achieved very easily using vuejs<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIKyI3iAhilDlOvnI0d7ZZYKS6ylpwgTZgh05dvIcUfVL0abKp1rxGMXLwg5hVFPSkam6x5CImS8OAwOwHDEKDMWUS-FeFlpEAKE6z9tT9vvOIB9xrugLgNnDeroqXO8zZhETpdkmseA/s1600/search-filter.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="753" data-original-width="1600" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIKyI3iAhilDlOvnI0d7ZZYKS6ylpwgTZgh05dvIcUfVL0abKp1rxGMXLwg5hVFPSkam6x5CImS8OAwOwHDEKDMWUS-FeFlpEAKE6z9tT9vvOIB9xrugLgNnDeroqXO8zZhETpdkmseA/s400/search-filter.gif" width="400" /></a></div>
<br />
Your input field should look like this<br />
<pre class="lang-cs prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">input type</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"text"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> v</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">model</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"filterKey"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
placeholder</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"please type the inventroy name you wish to search"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/></span></code></pre>
Here in v-model we are binding the filter key so we can pass that value to the filter method for filtering<br />
<br />
You can load the data to the table either using the hard coded models/from your backend apis<br />
Your table should look like this<br />
<pre class="lang-cs prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre class="lang-cs prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><table></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><thead></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tr></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">th v</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">for</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"(header,index) in Header"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">key</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"index"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">header</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">th</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tr</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">thead</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><tbody></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tr v</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">for</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"(data, index) in Filter"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">key</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"index"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td></span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}}/</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">td</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td></span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{{}}</</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">td</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><td></span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{{}}</</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">td</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tr</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">tbody</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">table</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span></code></pre>
</pre>
Here the Filter method in the tr v-for is a computed property it will fetch the filtered data.<br />
<br />
<pre class="lang-cs prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre class="lang-cs prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> get </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Filter</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">if</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">filterKey</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">length </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="lit" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">let</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> any </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">[];</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
data </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">filter</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">((</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">rowItem</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> any</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> rowItem</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">toLowerCase</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">().</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">indexOf</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">filterKey</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">toLowerCase</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">())</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!==</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="lit" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">1</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">else</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
</pre>
Here the this.data is the grid data needs to be loaded from api or hard coded one. I am loading it from the backend api call so not adding it here.<br />
<br />
The filter input what user enters we are comparing with each array items and checking if it exists then returning it.<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-66668720699814427022019-05-18T10:27:00.001-07:002019-05-18T10:36:42.962-07:00Internationalization in vuejs, vue cli, spa<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdF1lR2YmHzml2zDNGvTGeAsYynNrgsKXxGBxC2CgXDkFvKzWl3cf9rnNNyYNnNAylUeytdqKLTVN68cYVLm0IDx5s8jkUinRwNeO9mwwD2L5b0kxUdIyIf6u7xLrZzQ8vywVr_AS5sK4/s1600/vue18n.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1600" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdF1lR2YmHzml2zDNGvTGeAsYynNrgsKXxGBxC2CgXDkFvKzWl3cf9rnNNyYNnNAylUeytdqKLTVN68cYVLm0IDx5s8jkUinRwNeO9mwwD2L5b0kxUdIyIf6u7xLrZzQ8vywVr_AS5sK4/s320/vue18n.PNG" width="320" /></a></div>
Multi language support in vuejs application can easily achieved by using the vuei18n plugin.<br />
All you need to do is just follow below steps.<br />
My base app is created using vue cli you can<br />
<br />
<br />
<br />
<br />
<br />
check the details here how to create vue cli app <a href="https://cli.vuejs.org/guide/creating-a-project.html#vue-create" target="_blank">Vue CLI</a><br />
<br />
Step 1:<br />
Include the vue18n plugin in your package.json file dependencies section<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<span style="color: #9cdcfe;">"vue-i18n"</span>: <span style="color: #ce9178;">"8.4.0"</span></div>
next step is yarn/npm install of the same to your project.<br />
<br />
Step 2: Create a resources.ts file in src folder.<br />
<br />
<pre class="lang-java prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">export </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">const</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> resources </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
en </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
company_name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'JuggerNaut'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">},</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
ml </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
company_name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'ജഗ്ഗർനട്ട്'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">},</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
cn </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
company_name</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'剑圣'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">},</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">};</span></code></pre>
<br />
Step 3:<br />
<br />
Now in main.ts add the reference for resource and vue-18n libraray<br />
<br />
<pre class="lang-java prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueI18n</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vue-i18n'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">resources</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'@/i18n/resources'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">use</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueI18n</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">const</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> i18n </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">new</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueI18n</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
locale</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'en'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="com" style="border: 0px; box-sizing: inherit; color: #858c93; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// set locale</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
messages</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> resources</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="com" style="border: 0px; box-sizing: inherit; color: #858c93; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// set locale messages</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span></code></pre>
<br />
I have added the default language as 'en'<br />
Now include it in the Vue instance creation part like below<br />
<pre class="lang-java prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">new</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
router</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
i18n</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
render</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">h</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> h</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">App</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">),</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}).</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">$mount</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'#app'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span></code></pre>
<br />
Step 4:<br />
That's it the configuration part is done now we can go to the components and use it.<br />
<br />
I am biding the company name inside my html. this can be converted like below using resource file.<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<span style="color: grey;"><</span><span style="color: #569cd6;">li</span><span style="color: grey;">><</span><span style="color: #569cd6;">a</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"#"</span><span style="color: grey;">></span>{{$t(<span style="color: #ce9178;">'company_name'</span>)}}<span style="color: grey;"></</span><span style="color: #569cd6;">a</span><span style="color: grey;">></</span><span style="color: #569cd6;">li</span><span style="color: grey;">></span></div>
<br />
If you want to use inside your component you can use it like below.<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<span style="color: #569cd6;">const</span> companyName = <span style="color: #569cd6;">this</span>.$t(<span style="color: #ce9178;">'company_name'</span>) <span style="color: #569cd6;">as</span> string;</div>
<br />
And if you want to change the language dynamically just set like below in your component<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<span style="color: #569cd6;">this</span>.$i18n.locale = <span style="color: #ce9178;">'ml'</span>;</div>
<br />
It will convert to that corresponding language.</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-60899471623978019232019-05-17T02:17:00.003-07:002019-05-17T02:17:47.772-07:00Dependency Injection in vuejs, Vue Cli Single Page Application<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
We can use DI in vuejs application by very simple way, using
the @Provide and @Inject property decorator.So here is the scenario you have a service and you need the
instance of the same in different component in normal way you have to create
the instance of the same in different components and use it there.</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRaKetlZj6jbY2i9JBpMLHtHSz48CLAlCdWHa9xRXCZ3WLalClRSt3_4TQJB1Qx9MYxL1bdlCc1zgNhX9ULx5bRRj0lLUX-GCCZ47DWQcYcRR52FlZxo4FWBRe5TODJOFpiFDPV6plKAI/s1600/inventory.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="895" data-original-width="1600" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRaKetlZj6jbY2i9JBpMLHtHSz48CLAlCdWHa9xRXCZ3WLalClRSt3_4TQJB1Qx9MYxL1bdlCc1zgNhX9ULx5bRRj0lLUX-GCCZ47DWQcYcRR52FlZxo4FWBRe5TODJOFpiFDPV6plKAI/s320/inventory.PNG" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
But using DI you can use the @Provide property decorator and
declare it in your App.vue and then you can reuse it in the components wherever you want by using the @Inject property decorator<o:p></o:p></div>
<div>
<br /></div>
In App.vue<div>
<br /><div>
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><pre class="lang-scala prettyprint prettyprinted" style="border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Provide</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from </span><span class="lit" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vue</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">decorator'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">})</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
export default </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">App</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">extends</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Provide</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vueApiServices'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
public vueApiServices </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">new</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueApiServices</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
</pre>
In your corresponding component<br />
<br />
<pre class="lang-scala prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Prop</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Inject</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from </span><span class="lit" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vue</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">decorator'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">import</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueApiServices</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> from '</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">../../</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">services</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueApiServices</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Component</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
components</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{},</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">})</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
export default </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">InventoryDetailsComponent</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">extends</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Vue</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Inject</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vueApiServices'</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">private</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> vueApiService</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!:</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">VueApiServices</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
<br />
<br />
<br /></div>
</div>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-9063000412205195412019-05-08T07:32:00.001-07:002019-05-08T07:33:13.582-07:00Swagger UI Integration to .Net core Web API in 4 Steps<div dir="ltr" style="text-align: left;" trbidi="on">
Swagger helps you to manage your API's from the code base itself. You don't need to go for any other third party API testing tools like Postman,Soap UI etc.<br />
<br />
So here are the integration steps.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITLjKxq0LYQWL-ymBSpvtIMaAtJA18OOUvzEoTwzXlLTngHV6cXK-IwkTUzDJYs9YB8B9BjbeJhhDL6Vji0U2byYHtzJMyJngbgcRCVyG2sp68ziIbAPqSWFp2tc-NSJKjCeO091wVqE/s1600/swagg.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="848" data-original-width="1600" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITLjKxq0LYQWL-ymBSpvtIMaAtJA18OOUvzEoTwzXlLTngHV6cXK-IwkTUzDJYs9YB8B9BjbeJhhDL6Vji0U2byYHtzJMyJngbgcRCVyG2sp68ziIbAPqSWFp2tc-NSJKjCeO091wVqE/s320/swagg.PNG" width="320" /></a></div>
<br />
<br />
Step 1:<br />
Create a .Net core web api project using visual studio<br />
<br />
Step 2:<br />
Install the 'Swashbuckle.AspNetCore' nuget package using Nuget package manager<br />
<br />
Step 3:<br />
Go to the Startup.cs file in the project and below code in the 'Configure' method.<br />
<br />
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> app</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">UseSwaggerUI</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">c </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
c</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">SwaggerEndpoint</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"/swagger/v1/swagger.json"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"Inventory API"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span></code></pre>
Step 4: Add the below code in 'ConfigureServices' method<br />
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> services</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">AddSwaggerGen</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">c </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
c</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">SwaggerDoc</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"v1"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; box-sizing: inherit; color: #101094; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">new</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Info</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Version</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"v1"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Title</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"Inventory API"</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="border: 0px; box-sizing: inherit; color: #2b91af; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Description</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; box-sizing: inherit; color: #7d2727; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"Testing"</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span><span class="pln" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; box-sizing: inherit; color: #303336; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span></code></pre>
<br />
You need only these 4 steps to integrate the swagger UI.<br />
<br />
Now run the project in visual studio and in browser add swagger after the localhost port and hit enter<br />
Bingo your swagger is ready to use.<br />
<a href="https://localhost:44309/swagger/index.html">https://localhost:44309/swagger/index.html</a><br />
<br />
Another way is change the launch url in launchSetting.json to swagger<br />
which is present under the project proerties<br />
<br />
<pre style="background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 12px 8px; vertical-align: baseline; width: auto;"><code style="border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}</code></pre>
<br />
<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-23329158456895086082019-03-19T00:35:00.002-07:002019-03-19T00:43:46.669-07:00Vue Cli 3 typescript application integrated with moviedb<div dir="ltr" style="text-align: left;" trbidi="on">
If your looking for a template project for Vue Cli integrated with moviedb you can find it in below git hub repository.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlyIvwZWWVnR-dEKdlj5MUHx1tmo4gb2_6ffDB7upghPer-7dyFUtLKKcwr3Qw8LJK66tcLYZ-nKKOwLjn45rWr55_QoL7Wi4PaFrgRbfYbpkWGKLYP47nUIkWzO9nuC9IgJD0oidfguA/s1600/movie+search.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="933" data-original-width="1600" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlyIvwZWWVnR-dEKdlj5MUHx1tmo4gb2_6ffDB7upghPer-7dyFUtLKKcwr3Qw8LJK66tcLYZ-nKKOwLjn45rWr55_QoL7Wi4PaFrgRbfYbpkWGKLYP47nUIkWzO9nuC9IgJD0oidfguA/s320/movie+search.PNG" width="320" /></a></div>
<br />
<a href="https://github.com/tonytomk/moviemaniac">https://github.com/tonytomk/moviemaniac</a><br />
<br />
You can get the api key from movie db by registering there.<br />
<br />
In the above github code you need to replace the key in the moviecomponent.<br />
<br />
Technologies used : vuejs,typescript,vuecli,bootstrap</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-66354844255268905952018-06-24T04:25:00.000-07:002018-06-24T04:25:09.828-07:00How to find the factorial of a number using c#<div dir="ltr" style="text-align: left;" trbidi="on">
There are two approaches you can try for the above scenario one is with recursion and another one is using for loop.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_hQ84a9Y0NBmLBdcrCk0x9Mj6nWJAsCGwhJeiVr1GwHw0rmOobUDwLPAh_9q90br2J5PmRNne1-1OZqB4oyey7wuI23C-75w8NQuFRGodg8iVyN4nDjxPZkumVtF2KUJASbbjwNmT8s/s1600/factorial.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="446" data-original-width="954" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_hQ84a9Y0NBmLBdcrCk0x9Mj6nWJAsCGwhJeiVr1GwHw0rmOobUDwLPAh_9q90br2J5PmRNne1-1OZqB4oyey7wuI23C-75w8NQuFRGodg8iVyN4nDjxPZkumVtF2KUJASbbjwNmT8s/s640/factorial.PNG" width="640" /></a></div>
<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dotted #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"> <code style="color: black; word-wrap: normal;">
static void Main(string[] args)
{
int rslt= FactorialWithoutR(5);
Console.WriteLine("Factorial is :{0}", rslt);
}
public static int Factorial(int limit)
{
// Using Recursion
if (limit == 0)
{
return 1;
}
return limit * Factorial(limit - 1);
}
public static int FactorialWithoutR(int limit)
{
int factorial = 1;
for (int i = 1; i <= limit; i++)
{
factorial = factorial * i;
}
return factorial;
}
</code></pre>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-85135850398736601232018-06-24T03:57:00.001-07:002018-06-24T03:57:22.865-07:00How to create Fibonacci series for the given limit using C# <div dir="ltr" style="text-align: left;" trbidi="on">
Please find the solution for the same below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBSVrH4ydGSokQ3FsOuzLm-CjF4nhTfM7GXjrQixTz6krbXFNQL3tBd7ApBvcoep4z20AJKRNpXLfTEaAgDV5Esbi2Jo168Jjckaqc_ZLEd6_oo-zgwjhOxJ9lcLAzKlBwPGnj8JpHwKY/s1600/fib.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="507" data-original-width="775" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBSVrH4ydGSokQ3FsOuzLm-CjF4nhTfM7GXjrQixTz6krbXFNQL3tBd7ApBvcoep4z20AJKRNpXLfTEaAgDV5Esbi2Jo168Jjckaqc_ZLEd6_oo-zgwjhOxJ9lcLAzKlBwPGnj8JpHwKY/s400/fib.PNG" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dotted #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"> <code style="color: black; word-wrap: normal;">
static void Main(string[] args)
{
Fibonacci(10);
}
public static void Fibonacci(int limit)
{
// Method 1
int a = 0; int b = 1; int c=0;
Console.WriteLine("Method 1");
Console.WriteLine("Fib Series : {0},{1}", a, b);
for(int i = 2; i < limit; i++)
{
c = a + b;
Console.Write("{0} ",c);
a = b;
b = c;
}
// Method 2
int[] fibnArray = new int[limit];
fibnArray[0] = 0;
fibnArray[1] = 1;
for (int i = 2; i < limit; i++)
{
fibnArray[i] = fibnArray[i - 2] + fibnArray[i - 1];
}
string fib1 = "";
fibnArray.ToList().ForEach(x => { fib1 = fib1 + x.ToString() + ","; });
Console.WriteLine("\n Method 2");
Console.WriteLine("Fibonacci Series " + fib1);
//Method 3
Console.WriteLine("Method 3");
Recurring(0, 1, 1, 10);
// Method 4
List<int> fibnList = new List<int>();
for (int i = 0; i < limit; i++)
{
if (i == 0 || i == 1)
{
fibnList.Add(i);
}
else
{
fibnList.Add(fibnList[i - 2] + fibnList[i-1]);
}
}
string fib = "";
fibnList.ForEach(x => { fib = fib + x.ToString() + ","; });
Console.WriteLine("\n Method 4");
Console.WriteLine("Fibonacci Series " + fib);
Console.ReadLine();
}
public static void Recurring(int a,int b,int counter,int limit)
{
if (counter < limit)
{
Console.Write(a);
int c = a + b;
counter = counter + 1;
Recurring(b, c,counter , limit);
}
}
</int></int></code></pre>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-59887138078236659102018-06-24T02:53:00.001-07:002018-06-24T03:58:35.330-07:00How to convert a List as comma separated string using Linq, C# <div dir="ltr" style="text-align: left;" trbidi="on">
Here I am resolving the problem with different approaches using C#<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqE1Tr6GHf8WKH6UOcFTnCZW2lNE1EQgkvNdiQAbEyu1YZ9H7n0Qjpn38E4HRleu7GocaozOO8ggAFDCFYi4L6iAKQo3qJ744svFCNIZuWZihx-OLAz2IAery9HJRtE3fm6vFGn7a_lU/s1600/pic33.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="429" data-original-width="724" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqE1Tr6GHf8WKH6UOcFTnCZW2lNE1EQgkvNdiQAbEyu1YZ9H7n0Qjpn38E4HRleu7GocaozOO8ggAFDCFYi4L6iAKQo3qJ744svFCNIZuWZihx-OLAz2IAery9HJRtE3fm6vFGn7a_lU/s400/pic33.PNG" width="400" /></a></div>
<br />
<pre style="background-color: #eeeeee; border: 1px dotted #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"> <code style="color: black; word-wrap: normal;">
static void Main(string[] args)
{
ListCommaSepearted();
}
public static void ListCommaSepearted()
{
List<string> lstString = new List<string>()
{
"Coder",
"Juggernaut",
"Blog"
};
// Method 1
var k = "";
foreach (var item in lstString)
{
k = k+ item + ",";
}
k= k.Remove(k.LastIndexOf(','));
// Method 2
var str = string.Join(",",lstString);
var q = "";
//Method 3
lstString.ForEach(delegate(string item)
{
q = q + item + ",";
});
//Method 4
var p = "";
lstString.ForEach(x =>
{
p = p + x + ",";
});
Console.WriteLine("Coma : {0} ", p);
Console.ReadLine();
}
</string></string></code></pre>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-627709660975116352018-06-23T06:07:00.001-07:002018-06-23T06:11:11.018-07:00how to convert uppercase to lowercase and lowercase to uppercase of given string using c#<div dir="ltr" style="text-align: left;" trbidi="on">
Here I am solving the problem using C# programming language<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZB5gQlYlTAFLT3sXf7Ip5LDhNaVdp-FERX9I6pOLLVNlPxHTyPZNTWxL8fAqSq96JOL3cYjMmfbtPnbpbBXWd9gKRNqIZxShvyFjeuD3_9txLoLQJbkbX2Gses8aRr8kojYzZCtwqI0/s1600/pic22.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="392" data-original-width="651" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZB5gQlYlTAFLT3sXf7Ip5LDhNaVdp-FERX9I6pOLLVNlPxHTyPZNTWxL8fAqSq96JOL3cYjMmfbtPnbpbBXWd9gKRNqIZxShvyFjeuD3_9txLoLQJbkbX2Gses8aRr8kojYzZCtwqI0/s400/pic22.PNG" width="400" /></a></div>
<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dotted #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"> <code style="color: black; word-wrap: normal;">
static class Program
{
static void Main(string[] args)
{
CaseConvertion("Coder Juggernaut Blog");
}
public static void CaseConvertion(string input)
{
string newString = "";
foreach (char item in input)
{
if (char.IsLower(item))
{
string upper = item.ToString().ToUpper();
newString = newString + upper;
}
else if (char.IsUpper(item))
{
string lower = item.ToString().ToLower();
newString = newString + lower;
}
else
{
newString = newString + " ";
}
}
Console.WriteLine("Conerted Name : {0} ", newString);
Console.ReadLine();
}
}
</code></pre>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-57556627864925820222018-06-23T04:03:00.000-07:002018-06-23T04:21:53.440-07:00How to find the count of numbers,letters and special character from the given string C#<div dir="ltr" style="text-align: left;" trbidi="on">
This is a common interview question. here I am going to solve it using C# programming language.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2yHriDJdJhkJQGxynbxVAZPU2BVNvYBc3vqc5pSQyFfzFaaOZtPoDa5WdAwEKULrQAJWechdP5OvKwu2OmQW5QZnBEr41iFvtwGSvy1MeGI15gzvP8WkdA29dr6eHN9ShtDAPlj5XuE8/s1600/pic11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="416" data-original-width="945" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2yHriDJdJhkJQGxynbxVAZPU2BVNvYBc3vqc5pSQyFfzFaaOZtPoDa5WdAwEKULrQAJWechdP5OvKwu2OmQW5QZnBEr41iFvtwGSvy1MeGI15gzvP8WkdA29dr6eHN9ShtDAPlj5XuE8/s400/pic11.PNG" width="400" /></a><br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<pre style="background-color: #eeeeee; border: 1px dotted #999999; color: black; font-family: "andale mono" , "lucida console" , "monaco" , "fixed" , monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"> <code style="color: black; word-wrap: normal;">
static class Program
{
static void Main(string[] args)
{
FindCount("abc2D$%@");
}
public static void FindCount(string input)
{
int num_count = 0;
int letter_count = 0;
int symbol_Cont = 0;
foreach (char item in input)
{
if (char.IsNumber(item))
{
num_count = num_count + 1;
}
else if (char.IsLetter(item))
{
letter_count++;
}
else
{
symbol_Cont++;
}
}
Console.WriteLine("Num Count: {0},letter Count: {1} symbol Count: {2} ",
num_count, letter_count, symbol_Cont);
Console.ReadLine();
}
}
</code></pre>
</div>JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-54068477243017017302018-06-13T04:23:00.002-07:002018-06-13T04:23:27.399-07:00What is the difference between == and === in javascript<div dir="ltr" style="text-align: left;" trbidi="on">
In javascript for comparing the equality we can use both == and === depends on our specific development criteria. So it's better to know the difference between them.<br />
please check the gif image attached<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge-Au9OFXaNmZ-qj65B19mf89Wrhje7THidIigh08P29UTi_qlMdX7gciFyc-2b3pDBscAYV283SSHKCEb_ayddOt36sin81z8WFPf-8EFOITTz-muW3oX552_IXbYgRDjxoK9lY6cyI8/s1600/double-equal+and+triple+equal.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="622" data-original-width="1454" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge-Au9OFXaNmZ-qj65B19mf89Wrhje7THidIigh08P29UTi_qlMdX7gciFyc-2b3pDBscAYV283SSHKCEb_ayddOt36sin81z8WFPf-8EFOITTz-muW3oX552_IXbYgRDjxoK9lY6cyI8/s320/double-equal+and+triple+equal.gif" width="320" /></a></div>
<br />
<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0tag:blogger.com,1999:blog-5796253532899494125.post-47268649018534879382018-05-10T03:26:00.000-07:002018-05-10T03:26:03.786-07:00Sort array in ascending or descending order using sort function<div dir="ltr" style="text-align: left;" trbidi="on">
Array :<br />
<br />
let k=[1,3,11,2,33,22]<br />
<br />
k.sort()<br />
<br />
Result :<br />
<span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">[1,11,2,22,3,33]</span><div>
<span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><br /></span></div>
<div>
<span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">Here the array just sorted based on the ASCI values, so how to make it such way that it can return the array in ascending sort order.</span></div>
<div>
<span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><br /></span>k.sort((a,b)=>{return a-b})<br />
use the fat arrow function<br />
<span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">Result : [1,2,3,11,22,33]</span><br />
<span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">descending sort order.</span><br />
k.sort((a,b)=>{return b-a})<br />
<br />
Result : <span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">[33,22,11,3,2,1]</span><br />
<span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;">Use the below tool to try ES6 javascript</span><br />
<span style="background-color: white; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px;"><br /></span>
<span style="background-color: white;"><span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;">https://stephengrider.github.io/JSPlaygrounds/</span></span><br />
<span style="background-color: white;"><span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgKYatLqUttQEwzjIungCAXQ3NZPnwjhkBgySdux7QAX1XNdBwf7QF6n1gCn1PS-5VYImR8WxC5SvPXiOEo76cq6DRJncH27mP5lsey2zBdmP54O4JksxbGrQAnSQH1VaX3Y7VJM64S0/s1600/sort.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="404" data-original-width="1253" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgKYatLqUttQEwzjIungCAXQ3NZPnwjhkBgySdux7QAX1XNdBwf7QF6n1gCn1PS-5VYImR8WxC5SvPXiOEo76cq6DRJncH27mP5lsey2zBdmP54O4JksxbGrQAnSQH1VaX3Y7VJM64S0/s320/sort.PNG" width="320" /></a></div>
<span style="background-color: white;"><span style="color: #212529; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;"><br /></span></span></div>
</div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com3tag:blogger.com,1999:blog-5796253532899494125.post-32172271844625386342017-12-06T21:05:00.001-08:002017-12-06T21:05:31.565-08:00Microsoft.Office.Interop.Excel dll is missing in visual studio 2015, quick fix<div dir="ltr" style="text-align: left;" trbidi="on">
If you have newly installed visual studio 2015, you might not be having the Microsoft.office related dlls. So your existing project or new project in which you are using Microsoft office related dlls you may face the library reference issues. to avoid these things you have to install micorsoft office tools for VisualStudio.<br />
you can get the installer here : <a href="https://dev.office.com/getting-started/addins" target="_blank">download</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL06v0tsKh6SSVjOcqm1hBmfC1Kiyx4zPbVAH513jpS5vGQIFVZDwGvQLS84RU0_k-Zzv0myv2VGrsq1ziFFUqs61ywKlqRxNKUeyx4yY0KBGy8YtO6YXR23GmGCzKx7JloP9hSw7KyT0/s1600/office-dlls.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="604" data-original-width="1583" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL06v0tsKh6SSVjOcqm1hBmfC1Kiyx4zPbVAH513jpS5vGQIFVZDwGvQLS84RU0_k-Zzv0myv2VGrsq1ziFFUqs61ywKlqRxNKUeyx4yY0KBGy8YtO6YXR23GmGCzKx7JloP9hSw7KyT0/s320/office-dlls.PNG" width="320" /></a></div>
Once you have done with the installation you can check office related dlls in this folder<br />
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Visual Studio Tools for Office\<br />
<br /></div>
JUGGERNAUThttp://www.blogger.com/profile/14789214551247595242noreply@blogger.com0