How to use a Vue component specified only by template?

Question

I have a minimal Vue app:


<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
    <!-- 1. Link Vue Javascript -->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>

    <!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
    <script src='https://unpkg.com/v-calendar'></script>
    <!--3. Create the Vue instance-->
    <script>
        window.onload = function(){            
            new Vue({
                el: '#app',
                data: {                    
                },
                template: ''
            })
        }
      </script>
  </head>
  <body>
    <div id='app'>
    </div>
  </body>
</html>

and I want to show the date picker from https://vcalendar.io/examples/datepickers.html#button-dropdown but is only specified as template.

What are the steps to display that date picker inside my application?

vcalendar.io/installation.html#cdn

Michal Levý
– Michal Levý

2021-03-18 09:02:17 +00:00
Commented Mar 18, 2021 at 9:02 — Michal Levý
– Michal Levý, Commented Mar 18, 2021 at 9:02

Michal Levý · Accepted Answer · 2021-03-18 15:14:13Z

1

new Vue({
  el: '#app',
  data: () => ({
    selectedDate: null
  }),
  template: `
  <div>    
    <v-date-picker class="inline-block" v-model="selectedDate">
    <template v-slot="{ inputValue, togglePopover }">
      <div class="flex items-center">
        <button @click="togglePopover()">
          Pick date
        </button>
        <input
          :value="inputValue"          
          readonly
        />
      </div>
    </template>
  </v-date-picker>
  </div>
  `
})

<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>

<div id='app'>
</div>

edited Mar 18, 2021 at 15:14

answered Mar 18, 2021 at 9:11

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

Close but I do not see the actual pick button

Michal Levý Over a year ago

This is example of how to use template. Put inside whatever you want...

Alex Over a year ago

So the key was the fact that the top most 'template' definition (found at vcalendar.io/examples/datepickers.html#button-dropdown) was actually Vue's main 'template'

Collectives™ on Stack Overflow

How to use a Vue component specified only by template?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related