Aetae

Vue.component('style-slot', {
  functional: true,
  render(h, {scopedSlots, data}) {
    if (!scopedSlots.default) return;
    const map = ['class','staticClass','style','staticStyle'];
    const elements = scopedSlots.default();
    return elements.map(vNode => {
      if (!vNode.tag) return vNode;

      let vData;
      if (vNode.data) {
        vData = Object.assign({}, vNode.data);
        map.forEach((key, i) => {
          const dataKey = map[i - i % 2];
          if(key in data) {
            if(dataKey in vNode.data) {
              vData[dataKey] = Array.isArray(vData[dataKey])
                ? vData[dataKey].concat(data[key]) 
              : [vData[dataKey], data[key]];
            }
            else
              vData[dataKey] = data[key];
          }
        });
      } else {
        vData = map.reduce((obj, key, i) => {
          if(key in data)
            obj[key] = data[key];
          return obj
        }, {});
      }
      return h(vNode.tag, vData, vNode.children || vNode.text)
    })
  }
})

<template>
  <div>
    <style-slot class="sl-sl" style="border:2px">
      <slot/>
    </style-slot>
  </div>
</template>

<template>
  <div>
    <slot className="slot-class"/>
  </div>
</template>

<template>
  <component-a v-slot="{className}">
    <p :class="['p-class', className]">text</p>
  </component-a>
</template>

computed: {
  getterResult() {
    return this.$store.getters[this.getter]
  }
}

:style="`background: url(${require('@/assets/images/image.jpeg')}) no-repeat center`"

<ul class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/foodmenu">Перспективное меню</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/journal">Журнал питания</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/ambarbook">Амбарная книга</router-link>
</ul>

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData({resourcePath}) {
          const vueFileName = resourcePath.match(/([^\\\/]+).vue$/i);
          if(vueFileName)
            return `$vue-file-name: "${vueFileName[1]}"`
        }
      }
    }
  }
}

var app = new Vue({
  el: '#vue-app-one',
  data: {
    sitename: 'The Shop',
    string: 'Hello',
    product: {
      id: 1001,
      title: 'Phone',
      description: 'The best one <em>phone</em> ever',
      price: 1000000,
      image: 'This is an image',
    },
    filters: {
      formatPrice: function(price){
        if (!parseInt(price)) {return "";}
        if (price > 9999){
          var priceString = (price /100).toFixed(2);
          var priceArray = priceString.split("").reverse();
          var index = 3;
          while (priceArray.length > index +3){
            priceArray.splice(index+3, 0, ',');
            index +=4;
          }
          return '$' + priceArray.reverse().join('');
        } else{
          return '$' + (price/100).toFixed(2);
        }
      }
    }
  },
});

body, html {
    height: 100%;
}