# VueJs Boilerplate

**URL:** <https://forum.dfinity.org/t/vuejs-boilerplate/1923>\
**Category:** Developers\
**Created:** [February 4, 2021, 3:44pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923 "2021-02-04T15:44:45Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [February 4, 2021, 3:44pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/1 "2021-02-04T15:44:45Z")

</div>

Not mine! Doesn’t look like this has been shared here before:

> **[nop33/dfinity-vue](https://github.com/nop33/dfinity-vue)**
>
> 🌱 Vue.js integration with DFINITY SDK bootstrap webpack project.

Just need to figure out how to get dev-server running!

If you end up seeing this, huge thanks Nop33!

---

<div class="post-metadata">

**Author:** ![rckprtr](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/rckprtr/32/809_2.png) [@rckprtr](https://forum.dfinity.org/u/rckprtr)\
**Post date:** [February 4, 2021, 5:07pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/2 "2021-02-04T17:07:12Z")

</div>

Cool! Below is how people usually get hot reload working, you need to load the DFINITY agent in the browser as it gets injected by the canister.

> <https://github.com/FloorLamp/dfinity-react-ts-tailwind-starter/blob/master/src/frontend/createAgent.ts>

Then in his index he has this:

> <https://github.com/FloorLamp/dfinity-react-ts-tailwind-starter/blob/665e22e59dd4f4c91689ed79926816676c828fe0/src/frontend/index.tsx#L5>

So if the environment is development then it calls createAgent. I think this is the cleanest approach I’ve seen.

Also please pay attention to his DFINITY agent version, I think the latest this works with is 0.6.13? After that there is an issue with the BLS wasm file not loading which Im not sure how to fix.

`"@dfinity/agent": "0.6.13",` is in my package.json

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [February 4, 2021, 5:23pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/3 "2021-02-04T17:23:20Z")

</div>

Thanks for sharing! Funny you replied, I was just looking at your AS CDK earlier!

> **[rckprtr/cdk-as](https://github.com/rckprtr/cdk-as)**
>
> Unofficial Experimental AssemblyScript CDK for DFINITY

Super cool stuff!!

---

<div class="post-metadata">

**Author:** ![anthonymq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/anthonymq/32/524_2.png) [@anthonymq](https://forum.dfinity.org/u/anthonymq)\
**Post date:** [February 19, 2021, 2:02pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/4 "2021-02-19T14:02:32Z")

</div>

Anyone has managed to run this template on dev-server ? Tried a lot of things but can’t get it working for the moment ☹

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [February 19, 2021, 2:35pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/5 "2021-02-19T14:35:23Z")

</div>

@anthonymq - I have a dev-server project I can share that I built before this.

> **[SteveMaybe/dfinity-vue-starter](https://github.com/SteveMaybe/dfinity-vue-starter)**
>
> Contribute to SteveMaybe/dfinity-vue-starter development by creating an account on GitHub.

> <https://github.com/SteveMaybe/dfinity-vue-starter/blob/master/webpack.config.js>

> <https://github.com/SteveMaybe/dfinity-vue-starter/blob/master/src/frontend/public/index.js>

Should be enough to get the above template working.

---

<div class="post-metadata">

**Author:** ![anthonymq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/anthonymq/32/524_2.png) [@anthonymq](https://forum.dfinity.org/u/anthonymq)\
**Post date:** [February 19, 2021, 7:03pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/6 "2021-02-19T19:03:16Z")

</div>

Thanks it helped !  
Did you found a way to split your assets in chunks with webpack ? I’m worried I will hit the limit pretty soon and can’t get it working.

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [February 19, 2021, 7:29pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/7 "2021-02-19T19:29:45Z")

</div>

I suspect you can load them all using the canister apis. However, what I did was just disable generating the source map :\

---

<div class="post-metadata">

**Author:** ![anthonymq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/anthonymq/32/524_2.png) [@anthonymq](https://forum.dfinity.org/u/anthonymq)\
**Post date:** [April 7, 2021, 11:08am UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/8 "2021-04-07T11:08:52Z")

</div>

Hi @Steve ,  
Did you try to use vue-router ?  
I get an error “ic is not defined” on every routes when I run on the devserver ☹, it works great when I deploy on the local IC.  
I don’t understand what is happening.

---

<div class="post-metadata">

**Author:** ![anthonymq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/anthonymq/32/524_2.png) [@anthonymq](https://forum.dfinity.org/u/anthonymq)\
**Post date:** [April 7, 2021, 1:06pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/9 "2021-04-07T13:06:02Z")

</div>

Nevermind, I fixed that.  
I was importing my components with “import” instead of “require”.

---

<div class="post-metadata">

**Author:** ![rckprtr](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/rckprtr/32/809_2.png) [@rckprtr](https://forum.dfinity.org/u/rckprtr)\
**Post date:** [April 7, 2021, 3:47pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/10 "2021-04-07T15:47:52Z")

</div>

What version of Vue are you using? Also: JS or TS?

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [April 7, 2021, 3:56pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/11 "2021-04-07T15:56:43Z")

</div>

We will support normal routing for static assets in the asset canister starting with `dfx: ^0.7.0`. It makes things like Vue and React routers work much more smoothly.

I just wrote a post on adapting an out-of-the box JS framework to deploy to the IC with our new pattern, hope it helps!

> **[Static Site Generators on the IC](https://kyle-peacock.com/blog/dfinity/static-site-generators-ic/)**
>
> Interested in running a website on a decentralized cloud platform? Follow along as I start from a fresh project and adapt it for the Internet Computer

---

<div class="post-metadata">

**Author:** ![anthonymq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/anthonymq/32/524_2.png) [@anthonymq](https://forum.dfinity.org/u/anthonymq)\
**Post date:** [April 7, 2021, 4:06pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/12 "2021-04-07T16:06:34Z")

</div>

JS and vue 2.6.12.  
@anon74414410 I will give it a try

---

<div class="post-metadata">

**Author:** ![anthonymq](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/anthonymq/32/524_2.png) [@anthonymq](https://forum.dfinity.org/u/anthonymq)\
**Post date:** [April 7, 2021, 4:29pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/13 "2021-04-07T16:29:07Z")

</div>

Hi @anon74414410 ,  
I’m trying to update my dfx to the new version.  
I have not finished the migration but when I deploy my frontend canister I get an error :

```auto
Installing code for canister frontend, with canister_id ryjl3-tyaaa-aaaaa-aaaba-cai
Authorizing our identity (default) to the asset canister...
Uploading assets to asset canister...
  /logo.png 1/1 (85719 bytes)
  /index.html 1/1 (201 bytes)
  /index.js 1/1 (1460952 bytes)
  /sample-asset.txt 1/1 (24 bytes)
Invalid data: Expected arguments but found none.

```

Does it ring any bell to you ?

---

<div class="post-metadata">

**Author:** ![rckprtr](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/rckprtr/32/809_2.png) [@rckprtr](https://forum.dfinity.org/u/rckprtr)\
**Post date:** [April 7, 2021, 6:45pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/14 "2021-04-07T18:45:17Z")

</div>

Hey Kyle,

> <https://github.com/krpeacock/ic-vcf-gatsby/blob/main/package.json#L18>

Would upgrading to the latest @dfinity/agent 7.x.x? Impact this solution at all?

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [April 7, 2021, 7:08pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/15 "2021-04-07T19:08:44Z")

</div>

Ah, there’s a slight bug with Buffer in upgrading to 0.7.1. We plan to get rid of that package soon, but for now the way to manage it is with a webpack config. I’ll update the repo and my blog post

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [April 7, 2021, 7:29pm UTC](https://forum.dfinity.org/t/vuejs-boilerplate/1923/16 "2021-04-07T19:29:16Z")

</div>

Pushed those out. The solution for now is to add something like this to a webpack config, if anyone else encounters it

```
plugins: [
  new webpack.ProvidePlugin({
    Buffer: [require.resolve("buffer/"), "Buffer"],
  }),
]
```