Vue.js, Router importing template vue file

Question

Hi Guys I got a simple Vue.js project and I am trying to import a vue template file into my index.html file without using the cli-tools like webpack or browserify.

As far as i understood I would need to use something called a router to be able to todo this and import some extra JS in my project.

<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

In my index.html script tag i am creating a new object which refers to my navigation component which i wanna include.

var Settings =  httpVueLoader('Navigation.vue') ,
router = new VueRouter({
    routes:[
        { path:'/navigation', component: Navigation }
    ]
});

I wanna be able to just use the <navigation></navigation> tag inside my index.html file to get whatever code is inside the Navigation.vue file.

I got a codepen with my project here: https://codepen.io/fennefoss/project/editor/ZerEod#

Answer 1

You don't need vue-router here, just import the Navigation component like this: import navigation from "./Navigation.vue" And use it as <navigation/> in HTML code.

Vue-router is being used for different routes management.

Answer 2

i think you need export Navigation.vue , btw your style tag & script tag Put outside template ,like this

Navigation.vue:

    <template id="navigation">
        <p>Click on the Menu Icon to transform it to "X":</p>
        <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>

    </template>

    <style>
        .container {
            display: inline-block;
            cursor: pointer;
        }

        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
    </style>

    <script>
        module.exports = {
            data: function () {
                return {};
            },
            mounted: function () {
                function myFunction(x) {
                    x.classList.toggle("change");
                }
            }
        };

    </script>

Answer 3

Using a module bundler would always be better for many reasons, one being maintainability. But if you can't, try registering the component in the script file, like so:

Vue.component('navigation', {
  template: `
      <p>Click on the Menu Icon to transform it to "X":</p>
      <div v-bind:class="[ 'container', { 'change': active } ]" @click="myFunction">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    `, 
  data() {
    return {
      active: false
    }
  }
  methods: {
    myFunction(x) {
      this.active = !this.active;

      // do your other logic here if need be
    }
  }
})

const app = new Vue({
  el: '#app',
  data() {
    return {
      products: [],
      showMobileMenu: false,
      productHeadline: 'Product Flow Tool'
    }
  },
  computed: {
    totalProducts() {
      return this.products.reduce((sum, product) => {
        return sum + product.quantity
      }, 0)
    }
  },
  created() {
    fetch('https://www.fennefoss.dk/sample.json')
    //fetch('./sample.json')
    .then(response => response.json())
    .then(json => {
      this.products = json.products
    })
  }
})

index.html

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

You still need to put the CSS files somewhere though, and that's the good part about using a module bundler -- to enable single file components.