Add VUE.JS to plain JS app?

[Remco Koffijberg]

Hi

I tried this weekend to ‘upgrade’ my existing app with vue.js. I’d really like the idea of sorting and adding lists in a simple way.

However.

From the demo apps i understand that it requires a whole new setup of my app (new navigation, new page templates etc.)

Is this true? I mean, is it really impossible to just ‘add’ vue.js to the existing plain js code (as in a website)?

Thanks!!

Remco

[Fran Diox]

@Remco-Koffijberg In my opinion, if you include Vue.js in your project you should go all the way with it, not only for specific features like sorting arrays. You will run intro issues if you show lists with Vue and then modify them outside Vue due to the reactivity system.

If you are interested, have a look at the interactive tutorial in order to compare how things are done in Vue and other frameworks.

[Remco Koffijberg]

Thanks.

It will be a lot of work to re-write my app but I tried the tutorial code just to understand page navigation.

I created the minimum vue.js app and replaced the code in ‘App.vue’ with the code of the tutorial “Creating a page”. It throws the error “vue is not defined”.

What did i do wrong?

Tx

<template id="main">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">{{ title }}</div>
      <div class="right">
        <v-ons-toolbar-button>
          <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
        </v-ons-toolbar-button>
      </div>
    </v-ons-toolbar>

    <p style="text-align: center">
      <v-ons-button @click="$ons.notification.alert('Hello World!')">
        Click me!
      </v-ons-button>
    </p>
  </v-ons-page>
</template>

<div id="app"></div>


<script>
new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      title: 'My app'
    };
  }
});


</script>

Remco

[Fran Diox]

@Remco-Koffijberg As the error says, Vue is not defined. Have you included vue.js?

[Remco Koffijberg]

You are fast! (-;

I thought it was included in the Minimum example (sounds like a minimum to me … (-; )

I’ll try this!

[Fran Diox]

@Remco-Koffijberg It is included, but the minimum template is not calling Vue directly from App.js. If you want to call it from there then simply include it in that file with import Vue from 'vue'. Check main.js and make sure you’re not repeating code.

[Remco Koffijberg]

@Fran-Diox said:

import Vue from ‘vue’

I added “import Vue from ‘vue’” and it works! That is great!!

It is still in main.js , if i remove it there, the error returns. Or is it better to put all code in main.js? (i really don’t have a clue about the structure of this app, sorry).

[Fran Diox]

@Remco-Koffijberg I’d recommend you reading Vue’s guide and learn a bit about the framework itself. It is very easy to follow :)