Sketchup uses html for its extension user interface.
I'm trying to make an interface with vue.js + vuetify.
Sketchup can render the page but I can't send data to javascript.
Sketchup sends data to javascript by calling a function and passing data.
Vue.js invokes an action callback when it's mounted.
Sketchup then executes the function updateUI(data). At this moment the interface throws an error: Uncaught ReferenceError: updateUI is not defined
at index.html:1
This is my main.js file where Vue is initialized and the updateUI function is declared.
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import shared_data from './stores/shared_data';
function updateUI(data){
shared_data.data.parameters = data.parameters;
}
Vue.config.productionTip = false
var gui = new Vue({
render: h => h(App),
}).$mount('#app')
This is index.html after webpack
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>my-app</title>
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Material+Icons">
<link href=C:/Users/**/my-app/dist/css/chunk-vendors.0c9ceaf8.css rel=preload as=style>
<link href=C:/Users/**/my-app/dist/js/app.6b29f88e.js rel=preload as=script>
<link href=C:/Users/**/my-app/dist/js/chunk-vendors.a37f46e5.js rel=preload as=script>
<link href=C:/Users/**/my-app/dist/css/chunk-vendors.0c9ceaf8.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app></div>
<script src=C:/Users/**/my-app/dist/js/chunk-vendors.a37f46e5.js></script>
<script src=C:/Users/**/my-app/dist/js/app.6b29f88e.js></script>
</body>
</html>
Try to add the function you want to call to the Window object, making sure it remains a global function and doesn't get wrapped inside an anonymous module when you build your JS.
window.updateUI = function(data){
shared_data.data.parameters = data.parameters;
}
You can also example a complete set of example in this github repo: https://github.com/SketchUp/htmldialog-examples (Example 4 introduces Vue.)
Related
I am pretty new to Vue.js.
I am trying to build a project without cli.
I've tried to add the CDN into the index.html.
and create a app.js file , add it to index.html and it works well.
Then I watch some youtube and tutorial, the idea of component kicks in and I am trying to add the Single-File Components into the project.
But I do not know how to structure the files so that it could work with the components.
Here are what I've got so far , could someone please tell me what's wrong here？
Any suggestions would be appreciated.
Many Thanks.
Oren
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>new Vue project</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs require a build step and is recomended
When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:
We have to ship the Vue template compiler to the browser (13kb extra size)
The compiler will have to retrieve the template string from already instantiated DOM
The compiler then compiles the string into a JavaScript render function
Vue then replaces existing DOM templates with new DOM generated from the render function.
If you still don't want a build step, take a look at petite-vue
I'm trying to get a basic VueJS application working using the code
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#3"></script>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>
</body>
</html>
But all I see is the error of 'Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.' when I browse to localhost:3000 on Firefox. I've been at this for hours but I can't figure out why it doesn't work when I've copied it from the VueJS page 'getting started'. I've used the commands 'npm run dev', 'npx serve' and 'npm run build' but they all return the same error in the web developer tools' console.
Any help or guidance on this would be appreciated.
It seems that you are using the global build of Vue where all APIs are exposed under the global Vue variable (line 4 in your example).
Solution 1
Remove the import line for vue and prepend createApp with "Vue.":
//REMOVED: import { createApp } from 'vue'
import MyComponent from './my-component.js'
Vue.createApp(MyComponent).mount('#app') //NOTE that "Vue." has been added
Solution 2
Another solution would be to add an importmap block. That way, you can refer to vue as specified in the importmap and the corresponding url is resolved from there. Unfortunately, this is (at the moment) only supported by Chromium-based browsers. Luckily, a shim is available to allow use of importmap on non-Chromium browsers.
See below for an example, where the shim is injected above the importmap-block. Note that the script-line for loading vue has been removed from the header-block.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script async src="https://ga.jspm.io/npm:es-module-shims#1.4.6/dist/es-module-shims.js"></script>
<script type="importmap">
{ "imports": { "vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js" } }
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue' createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')
</script>
</body>
</html>
I'm working on a vscode extension that works with a webview and i'm new to vscode extension and web development.
I made a webview with svelte but everytime i switch to another tab and come back to my webview's tab everything reloads.
I generated the html of the webview by a function who alse load the compiled components made in svelte.
function getGenericHTML(_webview: vscode.Webview, _extensionUri: vscode.Uri , _compiledElementName:string) : string {
// Local path to css styles in media folder
const stylesResetUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","reset.css"));
const stylesMainUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","vscode.css"));
const stylesBootstrap = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","bootstrap.min.css"));
const scriptBootstrap = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","bootstrap.bundle.min.js"));
// Svelte compiled elements
const scriptUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri, "out", "compiled", _compiledElementName + ".js"));
const cssUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri, "out", "compiled", _compiledElementName + ".css"));
// Use a nonce to only allow specific scripts to be run
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="img-src https: data:; style-src 'unsafe-inline' ${ _webview.cspSource }; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${stylesBootstrap}" rel="stylesheet" integrity=${"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"} crossorigin="anonymous">
<link href="${stylesResetUri}" rel="stylesheet">
<link href="${stylesMainUri}" rel="stylesheet">
<link href="${cssUri}" rel="stylesheet">
<script nonce="${nonce}">
tsvscode = acquireVsCodeApi();
</script>
</head>
<body>
</body>
<script nonce="${nonce}" src="${scriptUri}"></script>
<script nonce="${nonce}" src="${scriptBootstrap}" integrity=${"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"} crossorigin="anonymous"></script>
</html>`;
}
I need to declare the files to execute once? Did i miss something? Does anyone have some advice?
The full code of the extension is on github: https://github.com/ArkoMO93/al-translations.git
Thanks in advance
This is by design. If the webview is not visible, VS Code destroys it to reclaim memory. The webview is then automatically recreated when it becomes visible again. See https://code.visualstudio.com/api/extension-guides/webview#persistence for details about how to preserve state between unloads and reloads
If this doesn't work for your use case, you can enable retainContextWhenHidden in the WebviewPanelOptions. Again though, only do this if you absolutely need to
I've been learning Vue.js and I tried to have the root instance not erase the html content I put inside. The idea being that I could have a normal html page and Vue "watching" the main wrapper and if it run into a vue component it will be render by vue. I've managed to do that when I import the CDN of vue but not with the vue cli somehow. I don't understand the difference.
I made this codepen loading vue.js by the cdn and it render without problem
<div id="app">
<h1>My Vue.js App</h1>
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello world'
}
});
https://codepen.io/cvallee/pen/dLKVEP
But in codesandbox where it use vue cli nothing is render, the content of the root element flash and then disappear from the dom. No matter what I put into the main div it is erase as soon as the app mount. https://codesandbox.io/s/m5qvm40nkx
I think the issue has to do with the way that the CodeSandbox loads the Vue app and triggers the initial render. If you add an App.vue file and change the main.js file to
import Vue from "vue";
import App from "./App.vue";
// Vue.config.productionTip = false;
new Vue({
el: "#app",
render: h => h(App)
});
and the index.html to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>codesandbox</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
it works for me this way. Here is the working version - https://codesandbox.io/s/84ox08k24j
hi I'm trying to autocomplete/typeahead component for Vue 2 and Bootstrap 4
This is my code.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
</head>
<body>
<div id="container">
<vue-bootstrap-typeahead
v-model="query"
:data="['Canada', 'USA', 'Mexico']" />
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
<script>
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead);
new Vue({
el: '#container',
data: {
value: '',
},
});
</script>
</body>
</html>
Unfortunately this is not working due to following errors.
SyntaxError: import declarations may only appear at top level of a module
Source map error: request failed with status 404 Resource URL:
https://unpkg.com/vue-bootstrap-typeahead Source Map URL:
VueBootstrapTypeahead.umd.min.js.map
It would be great if someone can help me on this.
The code <script src="https://unpkg.com/vue-bootstrap-typeahead"></script> has imported the VueBootstrapTypeahead, and became a property of window.You don't need import again. when we talk about import, often the module concert come to us too. import declarations was often used in an app which need be transformed by tools, such as babel,webpack or rollup.
Please add this to the <head> of your document before the <link> tags:
<meta charset="UTF-8">