# vue.js im Storefront einbinden

**URL:** <https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257>\
**Category:** Programmierung\
**Created:** [26. Januar 2020 um 13:02 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257 "2020-01-26T13:02:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![oliverriske](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oliverriske](https://forum.shopware.com/u/oliverriske)\
**Post date:** [26. Januar 2020 um 13:02 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257/1 "2020-01-26T13:02:55Z")

</div>

Hallo

ich würde gerne vuue.js im Storefront Template nutzen.

Hat das schon mal jemand versucht.

Ich bin für jeden Hiweise, wie ich das einbinden kann dankbar.

---

<div class="post-metadata">

**Author:** ![twosg](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@twosg](https://forum.shopware.com/u/twosg)\
**Post date:** [26. Januar 2020 um 22:42 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257/2 "2020-01-26T22:42:35Z")

</div>

Hi,

schau mal hier:&nbsp;[https://www.vuestorefront.io/shopware/](https://www.vuestorefront.io/shopware/)

---

<div class="post-metadata">

**Author:** ![oliverriske](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oliverriske](https://forum.shopware.com/u/oliverriske)\
**Post date:** [30. Januar 2020 um 15:27 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257/3 "2020-01-30T15:27:01Z")

</div>

Das ist kein einbinden sondern ein eigener Ansatz.

Habe es aber schon selbst rausgefunden:

Nicht schick tut aber für Basics (ohne .VUE Files für Komponenten) erstmal.

1. mainjs:

import&nbsp;‘./assets/js/test.js’

1. assets/test1.js

import&nbsp;Vue&nbsp;from&nbsp;‘…/node\_modules/vue/dist/vue’

import&nbsp;axios&nbsp;from&nbsp;‘…/node\_modules/axios/dist/axios’

Vue.config.productionTip&nbsp;=&nbsp;false

Vue.options.delimiters&nbsp;=&nbsp;[’[[’,&nbsp;‘]]’]

new&nbsp;Vue({

&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;‘#appFileexplorer’,&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;components:&nbsp;{Example},

&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{

&nbsp; &nbsp; &nbsp; &nbsp; message:&nbsp;‘Vue.js&nbsp;loaded!’,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items:&nbsp;,

&nbsp;&nbsp;&nbsp;&nbsp;},

&nbsp;&nbsp;&nbsp;&nbsp;mounted()&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;methods:&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadData()&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;self&nbsp;=&nbsp;this;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axios.get(‘[https://jsonplaceholder.typicode.com/todos](https://jsonplaceholder.typicode.com/todos)’,&nbsp;{})

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(function&nbsp;(response)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.items&nbsp;=&nbsp;response.data;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(response);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).catch(function&nbsp;(error)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(error);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},

&nbsp;&nbsp;&nbsp;&nbsp;},

})

1. package.json in Ordner assets:

{

&nbsp;&nbsp;&nbsp;&nbsp;“name”:&nbsp;“nextag-extensions”,

&nbsp;&nbsp;&nbsp;&nbsp;“version”:&nbsp;“1.0.0”,

&nbsp;&nbsp;&nbsp;&nbsp;“dependencies”:&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“axios”:&nbsp;“^0.19.2”,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“vue”:&nbsp;“^2.6.11”,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“vue-loader”:&nbsp;“^14.2.2”,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“vue-template-compiler”:&nbsp;“^2.6.11”

&nbsp;&nbsp;&nbsp;&nbsp;}

}

1. npm install

P.S.: Für .vue Files müsste&nbsp;ich eine eigene webpack.config.js loader-Erweiterung schreiben. Leider gibt es da wie immer kein Beispiel. Muss ich mühsam selbst rausfinden, wie ich das mache.

Vielleicht hat jemand eine Hilfe für mich?

&nbsp;

&nbsp;

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [30. Januar 2020 um 18:46 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257/4 "2020-01-30T18:46:15Z")

</div>

Für das kompilieren nutze ich immer laravel-mix =\>&nbsp;[https://laravel-mix.com/docs/5.0/installation#stand-alone-project](https://laravel-mix.com/docs/5.0/installation#stand-alone-project)

&nbsp;

---

<div class="post-metadata">

**Author:** ![oliverriske](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oliverriske](https://forum.shopware.com/u/oliverriske)\
**Post date:** [30. Januar 2020 um 18:56 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257/5 "2020-01-30T18:56:46Z")

</div>

> [@Shopwareianer schrieb:](https://forum.shopware.com/profile/15489/Shopwareianer "Shopwareianer")
> 
> Für das kompilieren nutze ich immer laravel-mix =\>&nbsp;[https://laravel-mix.com/docs/5.0/installation#stand-alone-project](https://laravel-mix.com/docs/5.0/installation#stand-alone-project)
> 
> Ok da kukk ich mal wie das da einbauen kann - danke

---

<div class="post-metadata">

**Author:** ![oliverriske](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@oliverriske](https://forum.shopware.com/u/oliverriske)\
**Post date:** [31. Januar 2020 um 10:52 UTC](https://forum.shopware.com/t/vue-js-im-storefront-einbinden/64257/6 "2020-01-31T10:52:12Z")

</div>

> [@Shopwareianer schrieb:](https://forum.shopware.com/profile/15489/Shopwareianer "Shopwareianer")
> 
> > Für das kompilieren nutze ich immer laravel-mix =\>&nbsp;[https://laravel-mix.com/docs/5.0/installation#stand-alone-project](https://laravel-mix.com/docs/5.0/installation#stand-alone-project)
> > 
> > Perfekt - das funktioniert und nimmt mir die Mühe mit dem webpack ab. Vielen Vielen Dank!