https://docs.ignite.com/assets/js/19273245.8313b725.js

1"use strict";(globalThis.webpackChunkmy_website=globalThis.webpackChunkmy_website||[]).push([[970],{15680(e,n,t){t.d(n,{xA:()=>s,yg:()=>h});var a=t(96540);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=a.createContext({}),c=function(e){var n=a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},s=function(e){var n=c(e.components);return a.createElement(p.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},d=a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,p=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=c(t),h=r,y=d["".concat(p,".").concat(h)]||d[h]||u[h]||i;return t?a.createElement(y,o(o({ref:n},s),{},{components:t})):a.createElement(y,o({ref:n},s))}));function h(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,o=new Array(i);o[0]=d;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,o[1]=l;for(var c=2;c<i;c++)o[c]=t[c];return a.createElement.apply(null,o)}return a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},33084(e,n,t){t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var a=t(58168),r=(t(96540),t(15680));const i={},o="Vue frontend",l={unversionedId:"clients/vue",id:"version-v0.27/clients/vue",title:"Vue frontend",description:"Welcome to this tutorial on using Ignite to develop a web application for your",source:"@site/versioned_docs/version-v0.27/03-clients/03-vue.md",sourceDirName:"03-clients",slug:"/clients/vue",permalink:"/v0.27/clients/vue",draft:!1,tags:[],version:"v0.27",sidebarPosition:3,frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"TypeScript frontend",permalink:"/v0.27/clients/typescript"},next:{title:"React frontend",permalink:"/v0.27/clients/react"}},p={},c=[{value:"Create a blockchain and a Vue app",id:"create-a-blockchain-and-a-vue-app",level:2},{value:"Set up Keplr and an account",id:"set-up-keplr-and-an-account",level:2},{value:"Start a blockchain and a Vue app",id:"start-a-blockchain-and-a-vue-app",level:2},{value:"Setting the address prefix",id:"setting-the-address-prefix",level:2},{value:"Using an environment variable",id:"using-an-environment-variable",level:3},{value:"Setting address prefix in the code",id:"setting-address-prefix-in-the-code",level:3}],s={toc:c};

1function u(e){let{components:n,...i}=e;return(0,r.yg)("wrapper",(0,a.A)({},s,i,{components:n,mdxType:"MDXLayout"}),(0,r.yg)("h1",{id:"vue-frontend"},"Vue frontend"),(0,r.yg)("p",null,"Welcome to this tutorial on using Ignite to develop a web application for your\nblockchain with Vue 3. Ignite is a tool that simplifies the process of building\na blockchain application by providing a set of templates and generators that can\nbe used to get up and running quickly."),(0,r.yg)("p",null,"One of the features of Ignite is its support for ",(0,r.yg)("a",{parentName:"p",href:"https://vuejs.org/"},"Vue 3"),", a\npopular JavaScript framework for building user interfaces. In this tutorial, you\nwill learn how to use Ignite to create a new blockchain and scaffold a Vue\nfrontend template. This will give you a basic foundation for your web\napplication and make it easier to get started building out the rest of your\napplication."),(0,r.yg)("p",null,"Once you have your blockchain and Vue template set up, the next step is to\ngenerate an API client. This will allow you to easily interact with your\nblockchain from your web application, enabling you to retrieve data and make\ntransactions. By the end of this tutorial, you will have a fully functional web\napplication that is connected to your own blockchain."),(0,r.yg)("p",null,"Prerequisites:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("a",{parentName:"li",href:"https://nodejs.org/en/"},"Node.js")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("a",{parentName:"li",href:"https://www.keplr.app/"},"Keplr")," Chrome extension")),(0,r.yg)("h2",{id:"create-a-blockchain-and-a-vue-app"},"Create a blockchain and a Vue app"),(0,r.yg)("p",null,"Create a new blockchain project:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre"},"ignite scaffold chain example\n")),(0,r.yg)("p",null,"To create a Vue frontend template, go to the ",(0,r.yg)("inlineCode",{parentName:"p"},"example")," directory and run the\nfollowing command:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre"},"ignite scaffold vue\n")),(0,r.yg)("p",null,"This will create a new Vue project in the ",(0,r.yg)("inlineCode",{parentName:"p"},"vue")," directory. This project can be\nused with any blockchain, but it depends on an API client to interact with the\nblockchain. To generate an API client, run the following command in the\n",(0,r.yg)("inlineCode",{parentName:"p"},"example")," directory:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre"},"ignite generate composables\n")),(0,r.yg)("p",null,"This command generates two directories:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"ts-client"),": a framework-agnostic TypeScript client that can be used to\ninteract with your blockchain. You can learn more about how to use this client\nin the ",(0,r.yg)("a",{parentName:"li",href:"/clients/typescript"},"TypeScript client tutorial"),"."),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"vue/src/composables"),": a collection of Vue 3\n",(0,r.yg)("a",{parentName:"li",href:"https://vuejs.org/guide/reusability/composables.html"},"composables")," that wrap\nthe TypeScript client and make it easier to interact with your blockchain from\nyour Vue application.")),(0,r.yg)("h2",{id:"set-up-keplr-and-an-account"},"Set up Keplr and an account"),(0,r.yg)("p",null,"Open your browser with the Keplr wallet extension installed. Follow ",(0,r.yg)("a",{parentName:"p",href:"https://keplr.crunch.help/en/getting-started/creating-a-new-keplr-account"},"the\ninstructions"),"\nto create a new account or use an existing one. Make sure to save the mnemonic\nphrase as you will need it in the next step."),(0,r.yg)("p",null,"Do not use a mnemonic phrase that is associated with an account that holds\nassets you care about. If you do, you risk losing those assets. It's a good\npractice to create a new account for development purposes."),(0,r.yg)("p",null,"Add the account you're using in Keplr to your blockchain's ",(0,r.yg)("inlineCode",{parentName:"p"},"config.yml")," file:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-yml"},"accounts:\n  - name: alice\n    coins: [20000token, 200000000stake]\n  - name: bob\n    coins: [10000token, 100000000stake]\n    # highlight-start\n  - name: frank\n    coins: [10000token, 100000000stake]\n    mnemonic: struggle since inmate safe logic kite tag web win stay security wonder\n    # highlight-end\n")),(0,r.yg)("p",null,"Replace the ",(0,r.yg)("inlineCode",{parentName:"p"},"struggle since...")," mnemonic with the one you saved in the previous\nstep."),(0,r.yg)("p",null,"Adding an account with a mnemonic to the config file will tell Ignite CLI to add\nthe account to the blockchain when you start it. This is useful for development\npurposes, but you should not do this in production."),(0,r.yg)("h2",{id:"start-a-blockchain-and-a-vue-app"},"Start a blockchain and a Vue app"),(0,r.yg)("p",null,"In the ",(0,r.yg)("inlineCode",{parentName:"p"},"example")," directory run the following command to start your blockchain:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre"},"ignite chain serve\n")),(0,r.yg)("p",null,"To start your Vue application, go to the ",(0,r.yg)("inlineCode",{parentName:"p"},"vue")," directory and run the following\ncommand in a separate terminal window:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre"},"npm install && npm run dev\n")),(0,r.yg)("p",null,"It is recommended to run ",(0,r.yg)("inlineCode",{parentName:"p"},"npm install")," before starting your app with ",(0,r.yg)("inlineCode",{parentName:"p"},"npm run\ndev")," to ensure that all dependencies are installed (including the ones that the\nAPI client has, see ",(0,r.yg)("inlineCode",{parentName:"p"},"vue/postinstall.js"),")."),(0,r.yg)("p",null,"Open your browser and navigate to\n",(0,r.yg)("a",{parentName:"p",href:"http://localhost:5173/"},"http://localhost:5173/"),"."),(0,r.yg)("p",null,(0,r.yg)("img",{alt:"Web app",src:t(60334).A,width:"2438",height:"1762"})),(0,r.yg)("p",null,'Press "Connect wallet", enter your password into Keplr and press "Approve" to\nad

1d your blockchain to Keplr.'),(0,r.yg)("img",{src:"/img/web-4.png",width:"300"}),(0,r.yg)("p",null,"Make sure to select the account you're using for development purposes and the\n\"Example Network\" in Keplr's blockchain dropdown. You should see a list of\nassets in your Vue app."),(0,r.yg)("p",null,(0,r.yg)("img",{alt:"Web app",src:t(63818).A,width:"2438",height:"1762"})),(0,r.yg)("p",null,"Congratulations! You have successfully created a client-side Vue application and\nconnected it to your blockchain. You can modify the source code of your Vue\napplication to build out the rest of your project."),(0,r.yg)("h2",{id:"setting-the-address-prefix"},"Setting the address prefix"),(0,r.yg)("p",null,"It is necessary to set the correct address prefix in order for the Vue app to\nproperly interact with a Cosmos chain. The address prefix is used to identify\nthe chain that the app is connected to, and must match the prefix used by the\nchain."),(0,r.yg)("p",null,"By default, Ignite creates a chain with the ",(0,r.yg)("inlineCode",{parentName:"p"},"cosmos")," prefix. If you have\ncreated your chain with ",(0,r.yg)("inlineCode",{parentName:"p"},"ignite scaffold chain ... --adddress-prefix foo")," or\nmanually changed the prefix in the source code of the chain, you need to set the\nprefix in the Vue app."),(0,r.yg)("p",null,"There are two ways to set the address prefix in a Vue app."),(0,r.yg)("h3",{id:"using-an-environment-variable"},"Using an environment variable"),(0,r.yg)("p",null,"You can set the ",(0,r.yg)("inlineCode",{parentName:"p"},"VITE_ADDRESS_PREFIX")," environment variable to the correct\naddress prefix for your chain. This will override the default prefix used by the\napp."),(0,r.yg)("p",null,"To set the ",(0,r.yg)("inlineCode",{parentName:"p"},"VITE_ADDRESS_PREFIX")," environment variable, you can use the following\ncommand:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-bash"},"export VITE_ADDRESS_PREFIX=your-prefix\n")),(0,r.yg)("p",null,"Replace ",(0,r.yg)("inlineCode",{parentName:"p"},"your-prefix")," with the actual address prefix for your chain."),(0,r.yg)("h3",{id:"setting-address-prefix-in-the-code"},"Setting address prefix in the code"),(0,r.yg)("p",null,"Alternatively, you can manually set the correct address prefix by replacing the\nfallback value of the ",(0,r.yg)("inlineCode",{parentName:"p"},"prefix")," variable in the file ",(0,r.yg)("inlineCode",{parentName:"p"},"./vue/src/env.ts"),"."),(0,r.yg)("p",null,"To do this, open the file ",(0,r.yg)("inlineCode",{parentName:"p"},"./vue/src/env.ts")," and find the following line:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-ts",metastring:'title="./vue/src/env.ts"',title:'"./vue/src/env.ts"'},"const prefix = process.env.VITE_ADDRESS_PREFIX || 'your-prefix';\n")),(0,r.yg)("p",null,"Replace ",(0,r.yg)("inlineCode",{parentName:"p"},"your-prefix")," with the actual address prefix for your chain."),(0,r.yg)("p",null,"Save the file and restart the Vue app to apply the changes."))}u.isMDXComponent=!0},60334(e,n,t){t.d(n,{A:()=>a});const a=t.p+"assets/images/web-1-3f0d3c274836d1425a1e2b040f08212a.png"},63818(e,n,t){t.d(n,{A:()=>a});const a=t.p+"assets/images/web-5-b36405ac5cce234a5137185ba2f08c1d.png"}}]);