Created
April 13, 2021 16:31
-
-
Save PragatiVerma18/9e6f2ecac165e0b8ed25d184a3da1fcd to your computer and use it in GitHub Desktop.
The files required for building your first Adobe Photoshop and XD Plugin using VueJS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <form style="width: 300px;"> | |
| <h1> | |
| {{ message }} | |
| </h1> | |
| <p> | |
| Button has been clicked {{ count }} times. | |
| </p> | |
| <footer> | |
| <button uxp-variant="cta" v-on:click="increment">Click me</button> | |
| <button type="submit" uxp-variant="primary" v-on:click="close">Done</button> | |
| </footer> | |
| </form> | |
| </template> | |
| <script> | |
| module.exports = { | |
| props: { | |
| dialog: { | |
| type: Object | |
| } | |
| }, | |
| methods: { | |
| increment() { | |
| this.count++; | |
| }, | |
| close() { | |
| this.dialog.close(); | |
| } | |
| }, | |
| data() { | |
| return { | |
| reactive: true, | |
| message: 'Hello World Vue Component!', | |
| count: 0 | |
| } | |
| } | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const styles = require("./styles.css"); | |
| const Vue = require("vue").default; | |
| const hello = require("./hello.vue").default | |
| const { Text, Color } = require("scenegraph"); | |
| let dialog; | |
| function getDialog() { | |
| if (dialog == null) { | |
| document.body.innerHTML = `<dialog><div id="container"></div></dialog>` | |
| dialog = document.querySelector("dialog"); | |
| var app4 = new Vue({ | |
| el: "#container", | |
| components: { hello }, | |
| render(h) { | |
| return h(hello, { props: { dialog } }) | |
| } | |
| }) | |
| } | |
| return dialog | |
| } | |
| module.exports = { | |
| commands: { | |
| menuCommand: function () { | |
| getDialog().showModal(); | |
| } | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "id": "com.adobe.xd.starter.vue", | |
| "name": "Vue Starter Plugin XD", | |
| "version": "1.0.0", | |
| "host": { | |
| "app": "XD", | |
| "minVersion": "36.0.0" | |
| }, | |
| "icons": [ | |
| { | |
| "width": 24, | |
| "height": 24, | |
| "path": "icons/[email protected]" | |
| }, | |
| { | |
| "width": 48, | |
| "height": 48, | |
| "path": "icons/[email protected]" | |
| } | |
| ], | |
| "uiEntryPoints": [ | |
| { | |
| "type": "menu", | |
| "label": "Vue Starter Plugin XD", | |
| "commandId": "menuCommand" | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "vue_starter_plugin", | |
| "version": "1.0.0", | |
| "main": "main.js", | |
| "scripts": { | |
| "watch": "nodemon -w src -e js,vue,css -w webpack.config.js -x yarn build", | |
| "build": "webpack --mode development" | |
| }, | |
| "license": "none", | |
| "private": true, | |
| "devDependencies": { | |
| "clean-webpack-plugin": "^2.0.2", | |
| "copy-webpack-plugin": "^5.0.3", | |
| "css-loader": "^5.2.0", | |
| "style-loader": "^2.0.0", | |
| "file-loader": "^5.1.0", | |
| "nodemon": "^2.0.7", | |
| "vue-loader": "^15.9.6", | |
| "webpack": "^4.32.2", | |
| "webpack-cli": "^4.5.0" | |
| }, | |
| "dependencies": { | |
| "vue": "^2.6.12", | |
| "vue-template-compiler": "^2.6.12" | |
| }, | |
| "resolutions": { | |
| "acorn": "npm:acorn-with-stage3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { VueLoaderPlugin } = require("vue-loader"); | |
| const path = require("path"); | |
| const CopyPlugin = require("copy-webpack-plugin"); | |
| module.exports = { | |
| entry: "./src/main.js", | |
| output: { | |
| path: path.resolve(__dirname, "dist"), | |
| filename: "main.js", | |
| libraryTarget: "commonjs2", | |
| }, | |
| devtool: "none", // prevent webpack from using eval() on my module | |
| externals: { | |
| uxp: "commonjs2 uxp", | |
| scenegraph: "scenegraph", | |
| os: "commonjs2 os", | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.vue$/, | |
| loader: "vue-loader", | |
| }, | |
| { | |
| test: /\.png$/, | |
| exclude: /node_modules/, | |
| loader: "file-loader", | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: ["style-loader", "css-loader"], | |
| }, | |
| ], | |
| }, | |
| plugins: [ | |
| new VueLoaderPlugin(), | |
| new CopyPlugin(["plugin"], { | |
| copyUnmodified: true, | |
| }), | |
| ], | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment