Merge pull request #131 from uicrooks/dev

v4.3.0

package.json

@@ -2,7 +2,7 @@
   "name": "shopify-theme-lab",
   "description": "Customizable modular development environment for blazing-fast Shopify theme creation",
   "author": "Sergej Samsonenko",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "MIT",
   "scripts": {
     "start": "run-p -sr shopify:serve webpack:watch",
@@ -22,36 +22,36 @@
     "fix:shopify": "cd shopify && shopify theme check -a"
   },
   "dependencies": {
-    "tailwindcss": "^2.2.15",
-    "vue": "^3.2.11",
+    "tailwindcss": "^2.2.17",
+    "vue": "^3.2.20",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.6",
-    "@vue/compiler-sfc": "^3.2.11",
-    "autoprefixer": "^10.3.4",
-    "babel-loader": "^8.2.2",
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@vue/compiler-sfc": "^3.2.20",
+    "autoprefixer": "^10.3.7",
+    "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "css-loader": "^6.4.0",
+    "css-minimizer-webpack-plugin": "^3.1.1",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.17.0",
+    "eslint-plugin-vue": "^7.20.0",
     "eslint-webpack-plugin": "^3.0.1",
-    "mini-css-extract-plugin": "^2.3.0",
+    "mini-css-extract-plugin": "^2.4.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.11",
     "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-webpack-plugin": "^3.0.1",
     "url-loader": "^4.1.1",
-    "vue-loader": "^16.5.0",
-    "webpack": "^5.52.1",
-    "webpack-cli": "^4.8.0",
+    "vue-loader": "^16.8.1",
+    "webpack": "^5.59.1",
+    "webpack-cli": "^4.9.1",
     "webpack-merge": "^5.8.0"
   }
 }

src/main.js

@@ -5,6 +5,23 @@ import { createApp } from 'vue'
 import { createStore } from 'vuex'
 import './css/main.css'
 
+/**
+ * vuex
+ * auto-import all modules and prepare shared store
+ */
+const vuexModules = require.context('./vue/store/', true, /\.js$/)
+const modules = {}
+
+vuexModules.keys().forEach(key => {
+  const name = key.replace(/\.(\/|js)/g, '').replace(/\s/g, '-')
+  modules[name] = vuexModules(key).default
+})
+
+const store = createStore({
+  strict: process.env.NODE_ENV !== 'production',
+  modules
+})
+
 /**
  * create vue instance function
  */
@@ -28,25 +45,6 @@ const createVueApp = () => {
     app.component(name, component)
   })
 
-  /**
-   * vuex
-   * auto-import all modules
-   */
-  const vuexModules = require.context('./vue/store/', true, /\.js$/)
-  const modules = {}
-
-  vuexModules.keys().forEach(key => {
-    const name = key.replace(/\.(\/|js)/g, '').replace(/\s/g, '-')
-    modules[name] = vuexModules(key).default
-  })
-
-  const store = createStore({
-    strict: process.env.NODE_ENV !== 'production',
-    modules
-  })
-
-  app.use(store)
-
   /**
    * vue mixins
    * auto-register all mixins with a 'global' keyword in their filename
@@ -72,15 +70,22 @@ const createVueApp = () => {
    * vue plugins
    * extend with additional features
    */
-  // app.use(MyPlugin)
+  app.use(store)
 
   return app
 }
 
 /**
- * create and mount vue instance
+ * create and mount vue instance(s)
  */
-createVueApp().mount('#app')
+const appElement = document.querySelector('#app')
+
+if (appElement) {
+  createVueApp().mount(appElement)
+} else {
+  const vueElements = document.querySelectorAll('[vue]')
+  if (vueElements) vueElements.forEach(el => createVueApp().mount(el))
+}
 
 /**
  * fixes for Shopify sections