CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Cloudworks
Cloudworks

Reputation: 129

Using components without npm inside existing web page

I'm new to Vue.js and also do most work in a conventional LAMP environment. The vue components tried so far don't seem to work linked in. Can anyone please:

Thanks for any tips.

Upvotes: 7

Views: 2565

Answers (1)

acdcjunior
acdcjunior

Reputation: 135862

Since you are in a legacy context, you probably won't use npm/webpack/babel. In this case, you'll import every package you need via <script> tags.

  • Process:
    • Look for the component you need
    • Check their docs for the steps needed to import them.
      • Usually it is a <script> tag (and a CSS <link> style) followed by some steps to configure (but not always).
      • In some rare cases the lib doesn't provide instructions for usage via <script>, in this case you can try using <script src="https://unkpg.com/NODE-PACKAGE-NAME"> and then see if it is possible to use it directly.

Examples:

  • Declaring your own <custom-comp> component and registering it globally via Vue.component.

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <custom-comp v-bind:myname="name"></custom-comp>
</div>

<template id="cc">
  <p>I am the custom component. You handled me {{ myname }} via props. I already had {{ myown }}.</p>
</template>

<script>
Vue.component('custom-comp', {
  template: '#cc',
  props: ['myname'],
  data() {
    return {
      myown: 'Eve'
    }
  }
});
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js',
    name: 'Alice'
  }
});
</script>

  • Using a third-party component that gives instructions on how to use without NPM. Example bootstrap-vue. How to use? Follow their instructions for each specific component. Demo of the Card Component below.

<script src="https://unpkg.com/vue"></script>

<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
  <div>
    <b-card title="Card Title"
            img-src="https://lorempixel.com/600/300/food/5/"
            img-alt="Image"
            img-top
            tag="article"
            style="max-width: 20rem;"
            class="mb-2">
      <p class="card-text">
        Some quick example text to build on the card title.
      </p>
      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </div>
</div>

<script>
new Vue({
  el: '#app'
});
</script>

  • Finally, using a third-party component that doesn't show any specific instructon on how to use without NPM. In the demo below we see the vue2-datepicker. They don't give specific instructions on how to use via <script>, but by looking at their readme, we see their component typically exports a DatePicker variable. Use then use <script src="https://unpkg.com/vue2-datepicker"> to load the component and register it for use via Vue.component('date-picker', DatePicker.default);. The need for .default varies. For other components, Vue.component('comp-name', ComponentName); (instead of ComponentName.default) directly could work.

// After importing the <script> tag, you use this command to register the component
// so you can use. Sometimes the components auto-register and this is not needed
// (but generally when this happens, they tell in their docs). Sometimes you need
// to add `.default` as we do below. It's a matter of trying the possibilities out.
Vue.component('date-picker', DatePicker.default);

new Vue({
  el: '#app',
  data() {
    return {
      time1: '',
      time2: '',
      shortcuts: [
        {
          text: 'Today',
          start: new Date(),
          end: new Date()
        }
      ]
    }
  }
})
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-datepicker"></script>

<div id="app">
  <div>
    <date-picker v-model="time1" :first-day-of-week="1" lang="en"></date-picker>
    <date-picker v-model="time2" range :shortcuts="shortcuts" lang="en"></date-picker>
  </div>
</div>

Upvotes: 15

Related Questions