How can I get a Vue component working on Apache without a ton of infrastructure

Question

I'm trying to quickly learn Vue so I can do some quick hacking for a front end we need for internal use.

I'm following the Vue.js v2 guide specifically the Introduction and I have been implementing the examples one after the other on that page. All work fine when I throw them in an Apache2 folder until I got to app7 which has the first reference to a Vue component.

That example simply doesn't work - the tag <todo-item></todo-item> which is defined by that component simply doesn't show up, the page is empty.

What else do I have to do?

I haven't done anything other than create a one page file containing the HTML and the vue stuff and copying it to a server where Apache can see it. That worked just fine, at least for the first 6 examples. I would have expected that if it was necessary to do anything else for the seventh example, the introduction would have at least mentioned this. — David
– David, Commented Aug 19, 2019 at 17:11
If you get stuck with a complex frontend framework, you can always use jQuery, and then switch over to something more testable when you have some refactoring time. — halfer
– halfer, Commented Aug 19, 2019 at 20:40
It's not the framework that's particularly complex, it's the building infrastructure that's a headache, even when you're trying to do something basic. I'm going to have to find someone to outsource this work to - it's not worth my time to become expert in this stuff. — David
– David, Commented Aug 20, 2019 at 21:25

IVO GELOV · Accepted Answer · 2019-08-19 17:52:15Z

1

Since you are using Vue without a builder (Webpack) and thus obviously without Single-File Components - you have to avoid using custom tags (a.k.a components) in your HTML and instead wrap them inside a template tag like this:

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app',
  template: '#main', // this is the important part
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>
<template id="main">
  <ol>
    <!--
      "<todo-item>" is unknown to the browser so you have to put it
      inside "<template>" and then reference the template when
      instantiating your Vue component - otherwise the browser will
      simply ignore it.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</template>

answered Aug 19, 2019 at 17:52

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

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

2 Comments

David Over a year ago

Well, that didn't work either until I finally looked in the browser's debugger and realized that the Vue code has to go after the HTML. Thank you for the info. I understand your solution. So as my next question was in fact going to be about SFC, are you telling me that I can't use those without some preprocessing? If so, can you point me at an example that has the bare minimum necessary for this? The problem with all the examples I've found is that they create all sorts of extra stuff and it's very difficult to figure out what's REQUIRED vs what might be necessary someday!

IVO GELOV Over a year ago

Yes, you can not use SFC without preprocessing/compiling. You should start with vuejs.org/v2/guide/… which refers to cli.vuejs.org/guide Initially it may feel awkward but soon you will realize that all the stuff actually helps - more or less. The first time you may skip ESLint, Axios, Vuex, Vue-Router and alike - they are not necessary when you are just starting.

Collectives™ on Stack Overflow

How can I get a Vue component working on Apache without a ton of infrastructure

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related