Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

  • Provide a sample process to install vue components in a legacy LAMP environment
  • Provide a simple html template showing how to load a vue component

Thanks for any tips.

like image 233
Prema Avatar asked Apr 26 '18 22:04

Prema


People also ask

Can I use Vue JS without node?

Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.

How do I switch between VUE components?

You need to bind the value into the component and then emit a new value to the parent when you click a link. If you emit the event input and bind the value value , then you can use v-model .

How do I add components to Vue?

Open the file in your code editor. Create the component's template section by adding <template></template> to the top of the file. Create a <script></script> section below your template section. Inside the <script> tags, add a default exported object export default {} , which is your component object.

What is Web component in VUE JS?

Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. We consider Vue and Web Components to be primarily complementary technologies. Vue has excellent support for both consuming and creating custom elements.


1 Answers

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>
like image 178
acdcjunior Avatar answered Nov 30 '22 04:11

acdcjunior