CODEWITHSUNDEEP
javascripthtmlvue.jsvue-clivuejs3
jlo
jlo

Reputation: 2269

How do I mount a Vue 3 CLI project like codepen

I have written a working pen here.

I'm trying to replicate the same app within a vue-cli project. Everything is on default settings (vue3 preview), except for these 2 files:

main.js

import { createApp } from 'vue'
import BoostApp from './App.vue'
    
createApp(BoostApp).mount('#box')

App.vue

<template>
  <div id="box" class="demo">
    <h1>
      Compound vault
      <br />
    </h1>
    <span>
    Deposit
    <input type="number" min="0" v-model="deposit" style="width:6em" /> USD (in stablecoins)
    </span>
    <br />
    <br />CRV needed for 2.5x boost:
    <br />
    {{Math.ceil(deposit/CRVneeded*100)/100}} CRV for 4 years
  </div>
</template>

<script>
  export default {
    name: "BoostApp",
    data() {
      return {
        deposit: 10,
        CRVneeded: 2.12
      };
    }
  };
</script>
<style>
</style>

It builds fine with 'npm run serve', but when I visit http://localhost:8080/ I just get a blank screen.

Where am I going wrong? Thanks!

Upvotes: 1

Views: 403

Answers (1)

Dan
Dan

Reputation: 63119

The app mounts to the div in index.html, not the one in App.vue. So if you haven't renamed the div id to box in index.html, this is why.

You could also change this back to #app instead (recommended):

createApp(BoostApp).mount('#app')

Upvotes: 1

Related Questions