Learning Vue 3 and Hive Keychain at the same time

brianoflondon(77)

Published in

HiveDevs

Words

421

Reading

2 min

Listen

Play

This is a value for value post: see the explanation in the footer.

I'm in the process of completely re-writing the v4v.app website. Right now it's Vue 2 with a framework called Quasar and I inherited it from @ausbitbank who helped me get started with it.

Learning Vue 3 on Udemy with Danny

But I'm learning Vue 3 with the Composition API and using <script setup> format (that's gobbledegook if you aren't deep in this world). I paid for a terrific course on Udemy after watching hours of YouTube content: the structure, clarity and search-ability of the Udemy course makes a huge difference.

Hive Keychain

I was delighted to see this post from @keychain this morning: Hive Keychain SDK and Playground.

This came just at the point that I'm learning how to make Components in Vue. I've worked with Keychain before (I wrote some code in Python to interact with Keychain) but the reality is that front end web dev must be done in Javascript today.

Login with Vue 3

The first step was to look at this page:

And that was pretty much all I needed to write this function:

const keychainParams = ref({
  data: {
    username: 'hivehydra',
    message: message,
    method: keySelected,
    title: 'Login',
  },
  options: {},
})


async function login() {
  try {
    const login = await keychain.login(
      keychainParams.value.data,
      keychainParams.value.options
    )
    keychainError.value = ''
    console.log('✅ success' + { login })
    isLoggedIn.value = true
  } catch (error) {
    console.log('❌ failure')
    console.log({ error })
    keychainError.value = error
  }
}

I'm certainly not someone you want to copy code from at this stage, but the project in which I'm testing and learning all this is public. The link to my HiveKeychainLogin.vue component is here

I need to do a lot of work on using local browser storage and persistence and I'll be doing that soon. For now I just wanted to publish this little snippet and let you know how easy it is to get working with Hive.

Value for Value

For the last few months while building @v4vapp I was generously supported by the DHF. Going forward I have a much more modest support which covers direct server costs and a little of my time.

If you appreciate the work I do on and around Hive, you can express this directly: upvoting posts on Hive is great. Also consider a direct donation (there's a Tip button on Hive or a Lightning Address) on all my posts.

Support Proposal 244 on PeakD
Support Proposal 244 with Hivesigner
Support Proposal 244 on Ecency
Vote for Brianoflondon's Witness KeyChain or HiveSigner

Send Lightning to Me!