I am trying to load the code-mirror in a component.
import 'codemirror-cdn';
import {codemirror} from 'https://cdn.jsdelivr.net/npm/vue-codemirror#4.0.6/dist/vue-codemirror.min.js';
loading it via above statements but getting error
vue-router.js:1927 SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/vue-codemirror#4.0.6/dist/vue-codemirror.min.js' does not provide an export named 'codemirror'
If using the CDN, this should be included in the template tag:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-codemirror#4.0.6/dist/vue-codemirror.min.js"></script>
Related
I tried to load up into a local webpage #tensorflow/tfjs-tflite in the following configuration:
import "#tensorflow/tfjs-backend-cpu";
import * as tf from "#tensorflow/tfjs-core";
import * as tflite from "#tensorflow/tfjs-tflite";
as described in https://github.com/tensorflow/tfjs/tree/master/tfjs-tflite#via-npm
yet I'm getting this error when loading:
EDIT
After further testing, I'm able to load the modules via the CDN:
<!-- Import #tensorflow/tfjs-core -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-core"></script>
<!-- Adds the CPU backend -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-backend-cpu"></script>
<!--
Import #tensorflow/tfjs-tflite
Note that we need to explicitly load dist/tf-tflite.min.js so that it can
locate WASM module files from their default location (dist/).
-->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-tflite/dist/tf-tflite.min.js"></script>
I tried to initialize bootstrap tooltip in vue cli globally.
so I placed this lines of code in App.vue 'mounted hook':
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
here I get bootstrap is undefined error.
and
this.$jQuery('[data-bs-toggle="tooltip"]').Tooltip();
has no error but doesn't work.
I import libraries in 'main.js' like so:
// popper
import popper from "vue-popperjs/dist/vue-popper.min";
// bootstrap
import bootstrap from "bootstrap/dist/css/bootstrap.rtl.min.css";
import bootstrapJs from "bootstrap/dist/js/bootstrap.min";
Vue.use(bootstrap);
Vue.use(popper);
Vue.use(bootstrapJs);
and jQuery has been imported above of all.
I'm using vuejs 2 and bootstrap 5. BS doc recommend using the first code. Maybe my approach is not the proper one to do this or my imported libraries are wrong. I can't figure out.
so any answer appreciated :-)
I have a form in my Vue component which uploads the api file. Now I want to render the contents of the file like this:
I have imported swagger client library: https://github.com/swagger-api/swagger-ui.
Now, here
is an example of how you do it in a static page. But I need to do it inside a Vue component (or Quasar, specifically), so I do it like that:
Register swagger-ui inside my register components file:
<link rel="stylesheet" type="text/css" href="swagger-ui.css">
Now it is available as:
this.swaggerUI({})
anywhere in my components. Inside my component I have a div in a template to render the api file:
<template>
<q-form>here lies q-file element, submit button and other stuff</q-form>
<div id="swagger-ui"></div>
</template>
In the mentioned question he had something like:
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "https://yourserver.com/path/to/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
]
})
window.ui = ui
}
</script>
Here's the difference: first of all, no window.onload, I must render it on submit button. Then, I deal with an uploaded file stored in my model, so no URL here. Now, I don't get how to make it work with locally stored file, when I try with the remote url, it gives me:
vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "Invariant Violation: _registerComponent(...): Target container is not a DOM element."
I was getting a similar error (Target container is not a DOM element) trying to use a static swagger spec. Instead of using window.onload, I found that Vue has the mounted() function, so this Vue 3 file worked for me:
<template>
<div class="swagger" id="swagger"></div>
</template>
<script>
import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
export default {
name: "Swagger",
mounted() {
const spec = require('../path/to/my/spec.json');
SwaggerUI({
spec: spec,
dom_id: '#swagger'
})
}
}
</script>
This one appeared to be a simple yet very unobvious typo: in windows.onload function:
dom_id: '#swagger-ui',
must instead be
dom_id: 'swagger-ui',
without hash sign, that's it!
I want to write vue demo for education teaching purpose, in order to focus only the vue part, I don't want to introduce npm, bundler like webpack or browserify and so on.
So I write code using babel-standalone. I also want to use vue-class-component. But now I could not use the esm build of vue and vue-class-component, in short I want to support write code like this in my main.js
import Vue from '../vender/vue.esm.browser';
import Component from '../vender/vue-class-component.esm';
#Component
class App extends Vue {
//......
}
If I wrote the code like above, I got Uncaught ReferenceError: require is not defined eror.
Now I can make it work using the following style, but using the Component of vue-class-component is ugly.
<!-- the html contain these scripts -->
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-class-component#7.1.0/dist/vue-class-component.js"></script>
<script src="vender/babel.min.js"></script>
<!-- fix regenerator not defined -->
<script src="vender/regenerator-runtime.js"></script>
<script src="js/main.js"
data-plugins="transform-runtime,transform-class-properties,transform-decorators-legacy,transform-regenerator"
data-presets="es2015,stage-1" type="text/babel">
</script>
// js/main.js
const Component = VueClassComponent.default;
#Component
class App extends Vue {
//......
}
more details can found on https://github.com/liudonghua123/todos/tree/master/todos-vue-class-component
You need to add to data-plugins: "transform-es2015-modules-umd"
I've initialised aurelia with
<body aurelia-app>
...
</body>
The getting started guide (http://aurelia.io/get-started.html) says that this will, by default, try to load up app.js and app.html
How can I tell aurelia to load up main.js and main.html?
if I do <body aurelia-app="main"> only main.js is accessed and the view isn't shown.
When you supply a value for the aurelia-app attribute, Aurelia will load that module and call the configure method that is exported by this module. This is explained in the documentation.
Your configuration must tell Aurelia which module to load for the app root. Here is the example from the documentation:
import {LogManager} from 'aurelia-framework';
import {ConsoleAppender} from 'aurelia-logging-console';
LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.logLevel.debug);
export function configure(aurelia) {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.history()
.router()
.eventAggregator()
.plugin('./path/to/plugin');
aurelia.start().then(a => a.setRoot('app', document.body));
}
What you're expecting to happen isn't the actual behavior. Setting the value of attribute points Aurelia to a configuration module that will point aurelia to the app root. In your case, you might want to do something like this:
index.html
...
<body aurelia-app="configuration">
...
src\configuration.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot('main', document.body));
}
And then src\main.js and src\main.html will be loaded as you expect (well, actually it will be dist\main.js and dist\main.html, but the files you're editing are in the src directory).