Deploy on Genezio

README.md

@@ -25,6 +25,7 @@
 <ul>
   <li><a href="#demo">Demo</a></li>
   <li><a href="#quick-start">Quick Start</a></li>
+  <li><a href="#deploy">Deploy</a></li>
   <li><a href="#documentation">Documentation</a></li>
   <li><a href="#file-structure">File Structure</a></li>
   <li><a href="#browser-support">Browser Support</a></li>
@@ -55,6 +56,12 @@
   <li>Clone the repo: <code class="highlighter-rouge">git clone https://github.com/creativetimofficial/vue-argon-design-system.git</code>.</li>
 </ul>
 
+<h2 id="deploy">Deploy</h2>
+
+:rocket: You can deploy your own version of the template to Genezio with one click:
+
+[![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/vue-argon-design-system&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)
+
 <h2 id="documentation">Documentation</h2>
 
 <p>The documentation for the Vue Argon Design System is hosted at our <a href="https://demos.creative-tim.com/vue-argon-design-system">website</a>.</p>

genezio.yaml

@@ -0,0 +1,16 @@
+name: vue-argon-design-system
+region: us-east-1
+frontend:
+  # Specifies the path of your code.
+  path: .
+  # Specifies the folder where the build is located.
+  # This is the folder that will be deployed.
+  publish: dist
+  # Scripts will run in the specified `path` folder.
+  scripts:
+    # The command to build your frontend project. This is custom to your project.
+    # It must to populate the specified `publish` folder with a `index.html` file.
+    deploy:
+      - npm install --legacy-peer-deps
+      - npm run build
+yamlVersion: 2

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider cross-env CI=false vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -23,8 +23,9 @@
     "@vue/cli-plugin-eslint": "^3.4.0",
     "@vue/cli-plugin-pwa": "^3.4.0",
     "@vue/cli-service": "^3.4.0",
-    "node-sass": "^4.11.0",
-    "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.6"
+    "node-sass": "^9.0.0",
+    "sass-loader": "10.5.2",
+    "vue-template-compiler": "^2.6.6",
+    "cross-env": "^7.0.3"
   }
 }

src/assets/scss/custom/_utilities.scss

@@ -1,8 +1,8 @@
-@import "custom/utilities/backgrounds.scss";
-@import "custom/utilities/floating.scss";
-@import "custom/utilities/helper.scss";
-@import "custom/utilities/sizing.scss";
-@import "custom/utilities/spacing.scss";
-@import "custom/utilities/shadows.scss";
-@import "custom/utilities/text.scss";
-@import "custom/utilities/transform.scss";
+@import "utilities/backgrounds.scss";
+@import "utilities/floating.scss";
+@import "utilities/helper.scss";
+@import "utilities/sizing.scss";
+@import "utilities/spacing.scss";
+@import "utilities/shadows.scss";
+@import "utilities/text.scss";
+@import "utilities/transform.scss";