DEV Community

nop33.eth
nop33.eth

Posted on • Originally published at iliascreates.com on

Integrating Vue.js with DFINITY SDK Bootstrap project: Part 1

This tutorial demonstrates the integration of Vue.js with the default project of the DFINITY SDK, as a result of a fun hackathon between friends.

demo

Creating an Internet Computer application project

Create a simple webpack project using the dfx tool:

dfx new dfinity_vue
cd dfinity_vue
Enter fullscreen mode Exit fullscreen mode

If you prefer using yarn, delete the package-lock.json file and run yarn to create a yarn.lock file.

yarn && rm package-lock.json
Enter fullscreen mode Exit fullscreen mode

Integrating Vue

Installing packages

Since the DFINITY Canister Software Development Kit (SDK) already uses webpack, we have to install Vue from npm (instead of using the vue-cli tool). To do that, simply install the vue package:

yarn add vue
Enter fullscreen mode Exit fullscreen mode

Install vue-loader so that webpack can load .vue files, unless you are not planning on using Single File Components.

yarn add --dev vue-loader
Enter fullscreen mode Exit fullscreen mode

When using vue-loader you will also need vue-template-compiler to avoid runtime-compilation overhead and CSP restrictions.

yarn add --dev vue-template-compiler
Enter fullscreen mode Exit fullscreen mode

If you miss this part, you’ll receive this error message:

[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Enter fullscreen mode Exit fullscreen mode

Create Vue instance and component

Now that we have all the packages that we need we can update the src/dfinity_vue_assets/public/index.js file to use Vue. Replace the contents of the file with:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (h) => h(App)
}).$mount('#app')
Enter fullscreen mode Exit fullscreen mode

and create the src/dfinity_vue_assets/public/App.vue component with the following contents:

<template>
  <div id="app">
    <div>{{ greeting || 'Loading message from Internet Computer...' }}</div>
  </div>
</template>

<script>
import dfinity_vue from 'ic:canisters/dfinity_vue';

export default {
  data: () => {
    return {
      greeting: ''
    };
  },
  created() {
    dfinity_vue.greet(window.prompt("Enter your name:")).then(greeting => {
      this.greeting = greeting
    });
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

The above component will call the greet method of the dfinity_vue canister passing the user’s input as an argument and render the response on the DOM.

Deploying on the local Internet Computer network

Start a local Internet Computer network:

dfx start
Enter fullscreen mode Exit fullscreen mode

Register all canisters:

dfx canister create --all
Enter fullscreen mode Exit fullscreen mode

The above command will return an output similar (if not the same) to this:

Creating canister "dfinity_vue"...
"dfinity_vue" canister created with canister id: "rwlgt-iiaaa-aaaaa-aaaaa-cai"
Creating canister "dfinity_vue_assets"...
"dfinity_vue_assets" canister created with canister id: "rrkah-fqaaa-aaaaa-aaaaq-cai"
Enter fullscreen mode Exit fullscreen mode

Note the id of the dfinity_vue_assets canister (in this case: rrkah-fqaaa-aaaaa-aaaaq-cai). You’ll need it soon.

Build all canisters:

dfx build
Enter fullscreen mode Exit fullscreen mode

Deploy all canisters on the local network:

dfx canister install --all
Enter fullscreen mode Exit fullscreen mode

Pass the dfinity_vue_assets canister id as an argument to https://localhost:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai and browse your application.

Tips

After you make changes to the frontend code, redeploy only the frontend canister with:

dfx build dfinity_vue_assets && dfx canister install dfinity_vue_assets --mode upgrade
Enter fullscreen mode Exit fullscreen mode

Conclusion

Life should be easy peasy lemon squeezy. Not stressed depressed lemon zest. Integrating Vue.js in this case is a good example of the former 😊

You can find this project on GitHub: https://github.com/nop33/dfinity-vue

Top comments (0)