[Vuejs]-Vue.js, Router importing template vue file

by

0👍

✅

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.

0👍

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.

0👍

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>

Leave a comment