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.
Creating an Internet Computer application project
Create a simple webpack project using the dfx
tool:
dfx new dfinity_vue
cd dfinity_vue
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
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
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
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
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.
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')
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>
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
Register all canisters:
dfx canister create --all
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"
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
Deploy all canisters on the local network:
dfx canister install --all
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
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)