ijusplab / vue-cli-plugin-gas Goto Github PK
View Code? Open in Web Editor NEWVue CLI plugin for Google Apps Script development using Clasp
Vue CLI plugin for Google Apps Script development using Clasp
Vue Router
https://v3.router.vuejs.org/guide/advanced/lazy-loading.html#lazy-loading-routes
following code doesn't work.
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
can work if modify following.
{
path: '/about',
name: 'About',
component: About
}
Hey, I wanted to test this but hit a wall with the detection of clasp
~/vue-cli-plugin-gas-test $ npm -g install @google/clasp
/usr/local/bin/clasp -> /usr/local/lib/node_modules/@google/clasp/src/index.js
npm WARN [email protected] requires a peer of inquirer@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
+ @google/[email protected]
updated 1 package in 7.356s
~/vue-cli-plugin-gas-test $ clasp --version
2.3.0
~/vue-cli-plugin-gas-test $ vue add @ijusplab/vue-cli-plugin-gas
๐ฆ Installing @ijusplab/vue-cli-plugin-gas...
+ @ijusplab/[email protected]
updated 1 package and audited 1277 packages in 13.668s
48 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
โ Successfully installed plugin: @ijusplab/vue-cli-plugin-gas
? Select locale English
? Create new script? Yes
? Select script type standalone
? Select a region UCT
? Select a timezone UCT
? Add license? No
๐ Invoking generator for @ijusplab/vue-cli-plugin-gas...
๐ Changing files...
GAS-PLUGIN File not found .env. Had to create it.
โ Running completion hooks...Error: Cannot find module '@google/clasp/package.json'
Require stack:
- /Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js
- /Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/generator/index.js
- /Users/gerry/vue-cli-plugin-gas-test/package.json
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
at Function.resolve (internal/modules/cjs/helpers.js:81:19)
at isInstalled (/Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:53:33)
at checkVersion (/Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:117:17)
at setup (/Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:166:3)
at Installer.setup (/Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:179:24)
at /Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/generator/index.js:49:27
at runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:132:13)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js',
'/Users/gerry/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/generator/index.js',
'/Users/gerry/vue-cli-plugin-gas-test/package.json'
]
}
โ Running completion hooks...
ERROR Error: Clasp not installed
Error: Clasp not installed
at checkVersion (/Users/gerry/dev/donutz/app-script/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:118:23)
at setup (/Users/gerry/dev/donutz/app-script/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:166:3)
at Installer.setup (/Users/gerry/dev/donutz/app-script/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:179:24)
at /Users/gerry/dev/donutz/app-script/vue-cli-plugin-gas-test/node_modules/@ijusplab/vue-cli-plugin-gas/generator/index.js:49:27
at runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:132:13)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)
I'm using OS X Cataline 10.15.5, and have been using GAS and clasp for some time.
I do have /usr/local/lib/node_modules/@google/clasp/package.json
but perhaps my search path is bad? Help appreciated
Now, this plugin doesn't support for Vue/CLI v5.
The currently known issues are as follows.
Kind of following #5, trying to use this plugin I'm facing the following error : ERR_PACKAGE_PATH_NOT_EXPORTED
Running completion hooks...Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@google/clasp/package.json
at new NodeError (node:internal/errors:370:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:335:9)
at packageExportsResolve (node:internal/modules/esm/resolve:560:3)
at resolveExports (node:internal/modules/cjs/loader:476:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:516:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:913:27)
at Function.resolve (node:internal/modules/cjs/helpers:99:19)
at isInstalled (/home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:53:33)
at checkVersion (/home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:117:17)
at setup (/home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:166:3) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
โ Running completion hooks...
ERROR Error: Clasp not installed
Error: Clasp not installed
at checkVersion (/home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:118:23)
at setup (/home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:166:3)
at Installer.setup (/home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/utils/claspHelpers.js:179:24)
at /home/baron_l/projects/perso/dfg/dfg-tierlist-gs-vue/node_modules/@ijusplab/vue-cli-plugin-gas/generator/index.js:49:27
at runGenerator (/home/baron_l/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:132:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async invoke (/home/baron_l/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:92:3)
> vue info
System:
OS: Linux 5.12 Arch Linux
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 16.5.0 - /usr/bin/node
Yarn: Not Found
npm: 7.17.0 - /usr/bin/npm
Browsers:
Chrome: Not Found
Firefox: 90.0
npmPackages:
@ijusplab/vue-cli-plugin-gas: ~2.0.6 => 2.0.6
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.0.6
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.13
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.13
@vue/cli-plugin-babel: ~4.5.0 => 4.5.13
@vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
@vue/cli-plugin-router: ~4.5.0 => 4.5.13
@vue/cli-plugin-vuex: ~4.5.0 => 4.5.13
@vue/cli-service: ~4.5.0 => 4.5.13
@vue/cli-shared-utils: 4.5.13
@vue/compiler-core: 3.2.2
@vue/compiler-dom: 3.2.2
@vue/compiler-sfc: ^3.0.0 => 3.2.2
@vue/compiler-ssr: 3.2.2
@vue/component-compiler-utils: 3.2.2
@vue/devtools-api: 6.0.0-beta.15
@vue/eslint-config-prettier: ^6.0.0 => 6.0.0
@vue/preload-webpack-plugin: 1.1.2
@vue/reactivity: 3.2.2
@vue/runtime-core: 3.2.2
@vue/runtime-dom: 3.2.2
@vue/shared: 3.2.2
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^7.0.0 => 7.16.0
typescript: 4.3.5
vue: ^3.0.0 => 3.2.2
vue-eslint-parser: 7.10.0
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.8 (16.5.0)
vue-router: ^4.0.0-0 => 4.0.11
vue-style-loader: 4.1.3
vue-svg-inline-loader: ^1.4.6 => 1.5.1
vue-template-es2015-compiler: 1.9.1
vuex: ^4.0.0-0 => 4.0.2
npmGlobalPackages:
@vue/cli: 4.5.13
Tested scenarios:
NODE_PATH=/home/[...]/.config/yarn/global/node_modules vue add @ijusplab/vue-cli-plugin-gas
results in the above error. Same with npm global path ad NODE_PATH
Any idea on how to fix this?
In development(work locally, use command yarn serve / npm run serve
), cannot use browser extention Vue.js devtools.
The following messsage is shown.
Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
Hi, I have a lot of experience with GAS and clasp however this is my first attempt to use Vue so this tool could really be a lifesaver from me. I hope I am not simply using the tool incorrectly.
I'm attempting to deploy a blank project before I actually start developing and have gotten to the point that I'm trying to run npm run deploy however it seems Google has an issue with src/main.js.
"responseType: 'json',
retryConfig: {
currentRetryAttempt: 0,
retry: 3,
httpMethodsToRetry: [Array],
noResponseRetries: 2,
statusCodesToRetry: [Array]
}
},
code: 400,
errors: [
{
message: 'Syntax error: SyntaxError: Cannot use import statement outside a module line: 1 file: src/main.gs',
domain: 'global',
reason: 'badRequest'
}
]
}
โโ Code.js
โโ appsscript.json
โโ babel.config.js
โโ dist/ErrorHandler.gs
โโ dist/Service.gs
โโ dist/index.html
โโ public/index.html
โโ src/main.js
โโ src/plugins/vuetify.js
โโ src/server/ErrorHandler.js
โโ src/server/Service.js
โโ vue.config.js
Updating project version...
Created version 2. (we can see here that the deploy is updating the version, however it is not actually pushing these files to my Google Drive)
import google from '@ijusplab/vue-cli-plugin-gas/google.mock';
import VueGasPlugin from '@ijusplab/vue-cli-plugin-gas/utils/VueGasPlugin';
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false;
Vue.use(VueGasPlugin, {
google,
devMode: process.env.NODE_ENV !== 'production',
});
new Vue({
vuetify,
render: (h) => h(App),
}).$mount('#app');
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.