Add a front end with Vue

æpp Development For Beginners
1

Hello, I have a smart contract and I want to add a front end with Vue.

I need to communicate with my smart contract and the SDK.

I understand I can use javascript for this, and save my contract as a variable. as seen in emmanualjet’s excellent tutorial.

But how can I most simply add a front end to communicate with my aeproject-based smart contract work?

I’m currently attempting to add files in my " aepp-cli-js/project-name/ " directory. I’ve downloaded vue here and made a main.vue with some frontend html and css as well as a ContractInfo.js.

How can I tie this all together? Im having trouble understanding the examples/guides, they all have extraneous goals so what I should be doing is muddled. What should my file structure and dependencies look like?

My end goal is to go to localhost, and have some Vue-based buttons that interact with my smart contract and the SDK

Most thankfully,
PizzaGee

1 Like
2

currently my localhost:3000 just shows a blank page, ive tried various other expected addresses.

Sorry if I’m just being dumb here, very much confused and hoping to find some documentation to set me straight. The guides and examples all have multiple goals, I just want to connect my frontend html/css/js to my smart contract/SDK with vue.

1 Like
3

@jesulonimi, what do you think is the simplest way to achieve this.

4

maybe the boilerplate can help you GitHub - kenodressel/aepp-boilerplate: A vue.js boilerplate to build aepps in the aeternity eco system. just clone and run it

3 Likes
5

Hi @PizzaGee, first of all, make sure you have aeproject working well on your device, you can follow the aeproject installation guide here.
Then run aeproject shape vue in your preferred directory to create an aeproject vue template, you can find more on this here.
Inside the folder in which you ran the command is a folder called “Identity”, this folder contains code that is used to configure your walletInstance that an aeoproject vue project uses, which is then used to create a contract Instance so you can access the entrypoint functions you created in your contract, the bulk of code responsible for that in the todo project can be found here in the created function.
All you need to do is come to the ‘’./identity" directory and run npm run serve in your terminal to have the identity aepp up and running.
Then ill advise that you edit the aepp directory in the Todo tutorial to suit your needs and also run npm run serve in the './aepp ’ directory, it will automatically connect to the identity aepp running on localhost:8080, but if you do not want to do this, you should study the way this two functions getReverseWindow and getClient are used in the todo tutorial here

Feel free to ask questions on anything you do not understand above.

1 Like
6

This worked for me, so thank you very much. Appreciate the effort you took here.

I do have some questions.

What changes might be neccesary/steps taken to deploy this as a decentralized aepp in a way others could access it?

To replace the ToDo contract with my own contract/ aepp I understand that I must:

  1. Replace contract details in /src/contractDetails.js (easy)
  2. Replace/edit the HTML/CSS/JS and imports in /src/components/ToDo.vue (hard)
  3. Edit getters/setters/js in /src/store/toDo.module.js(moderate)
  4. Edit component name in /src/store/store.js (easy)
  5. Change imported/exported components in App.vue (easy)

Is that correct? can any of this be done automatically? Any good sources for editing files like ToDo.vue, which seems to be a lot of javascript and vue that interacts with the sophia contract and the user.

Huge thanks

7

Im certainly open to any info on what src/components/ToDo.vue is doing/how to replace it with my own.

I’m not totally lost, Im somewhat familiar with js and vue, but I would appreciate a third party perspective.

8

I did not check the details of the vue setup provided by ae-project but from what I can see in the source the aepp to wallet connection there is rather old and does use a standard (reverse-iframe) that AFAIK is not working in any production wallet right now. While its a nice way to set this up I would consider using the above mentioned boiler plate (https://github.com/kenodressel/aepp-boilerplate) as it fully supports AEX-2 and is therefore compatible with the Waellet, Superhero Wallet & Base Aepp. We also try to keep it updated but feel free to suggest changes or fix bugs if you happen to find any :slight_smile:

1 Like