Add app.js, Rename vue files to their names for auto importing

README.md

@@ -2,31 +2,26 @@
 
 ## Installation
 
-```
+```bash
 composer require rapidez/wishlist
 ```
 
-And require the Javascript in `resources/js/app.js`:
-```
-require('Vendor/rapidez/wishlist/resources/js/wishlist.js')
-```
-
 If you haven't published the Rapidez views yet, publish them with:
-```
+```bash
 php artisan vendor:publish --provider="Rapidez\Wishlist\WishlistServiceProvider" --tag=views
 ```
 
 ### Product page
 
 Include the wishlist button on the product page, for example in `resources/views/vendor/rapidez/product/partials/addtocart.blade.php`:
-```
+```blade
 @include('rapidez::wishlist.product.wishlist')
 ```
 
 ### Product listing
 
 Include the wishlist button on the listing items, for example in `resources/views/vendor/rapidez/listing/partials/item/addtocart.blade.php`:
-```
+```blade
 @include('rapidez::wishlist.listing.wishlist')
 ```
 
@@ -37,7 +32,7 @@ The wishlist account page can be found on `/account/wishlist` and [will be added
 ### Wishlist items count
 
 You can get the count of the customer's wishlist items by using the wishlist component. For example:
-```
+```blade
 <wishlist v-cloak>
     <span slot-scope="{ itemsCount }">
         @{{ itemsCount }}

resources/js/components.js

@@ -0,0 +1,3 @@
+import 'Vendor/rapidez/core/resources/js/vue'
+
+Vue.component('wishlist', () => import('./components/Wishlist.vue'))

resources/js/Wishlist.vue → resources/js/components/Wishlist.vue

@@ -1,6 +1,6 @@
 <script>
-    import removeProductsFromWishlist from './graphql/removeProductsFromWishlist'
-    import addProductsToWishlist from './graphql/addProductsToWishlist'
+    import removeProductsFromWishlist from '../graphql/removeProductsFromWishlist'
+    import addProductsToWishlist from '../graphql/addProductsToWishlist'
 
     export default {
         props: {

resources/js/eventlisteners.js

@@ -0,0 +1,14 @@
+document.addEventListener('turbo:load', () => {
+    window.app.$on('logged-in', async () => {
+        let response = await axios.post(config.magento_url + '/graphql', {
+            query: '{ customer { wishlists { id items_v2 { items { id product { sku id } } } } } }'
+        }, { headers: { Authorization: `Bearer ${localStorage.token}`, Store: config.store_code }})
+
+        localStorage.wishlist = JSON.stringify(response.data.data.customer.wishlists[0])
+        window.app.$emit('wishlist-changed')
+    });
+
+    window.app.$on('logout', () => {
+        localStorage.removeItem('wishlist')
+    });
+})

resources/js/package.js

@@ -0,0 +1,2 @@
+import './components'
+import './eventlisteners'

resources/js/wishlist.js

@@ -1,17 +1 @@
-import wishlist from 'Vendor/rapidez/wishlist/resources/js/Wishlist.vue'
-Vue.component('wishlist', wishlist)
-
-document.addEventListener('turbo:load', () => {
-    window.app.$on('logged-in', async () => {
-        let response = await axios.post(config.magento_url + '/graphql', {
-            query: '{ customer { wishlists { id items_v2 { items { id product { sku id } } } } } }'
-        }, { headers: { Authorization: `Bearer ${localStorage.token}`, Store: config.store_code }})
-
-        localStorage.wishlist = JSON.stringify(response.data.data.customer.wishlists[0])
-        window.app.$emit('wishlist-changed')
-    });
-
-    window.app.$on('logout', () => {
-        localStorage.removeItem('wishlist')
-    });
-})
+import './package'