I am using vue js 2.3.o version.
I want to use plugin for handling modal windows e.g. vue-js-modal (https://github.com/euvl/vue-js-modal).
I add library to my page when I want to use it.
<script type="text/javascript" src="/lib/vuejs/index.js"></script>
I put in a place before I am creating vue instance itself:
import VModal from 'vue-js-modal';
Vue.use(VModal);
var myVue = new Vue({
Then I see:
SyntaxError: import declarations may only appear at top level of a module
What I don't understand what is it about. What is wrong ? How should be this plugin correctly use ?
Thank you
It seems like you're importing the library using script tags. According to vue-js-modal's instructions, you have to use npm install vue-js-modal --save to install and then use import VModal from 'vue-js-modal' to import.
If you're using script tags to import the module, you'll have to write:
<script src="vue-js-modal.js" type="module"></script>
on your HTML page. However, for now, if you want to import modules in your browser, you'll have to do some extra steps to enable this feature. (You can follow the instructions here: link).
What I suggest is check out the demos vue-js-modal made: link, which use Babel and Webpack instead of only importing script tags. Or, when you set up your Vue web app, use their cli tool (link) to set up a starter project and then install vue-js-modal instead.
Related
v-gallery Plugin
I am trying to use this vue plugin in vuepress site
As the documentation (for plugin) is written in vuepress and contains the plugin (v-gallery) same is possible .
Imported the plugin locally in singlefile component
import VueGallery from "v-gallery/src/Gallery"; and proceeded as default instructions in the documentation
The issue
The above during deploy/build throws a error window not defined ,but continues to build and deploys
Is there a method to use the plugin globally by declaring it enhance.js (tried/failed{in build})
Are there any other suggestions to getting it to work without the build error
Please throw light on using vue plugin in vuepress in general
Tried contacting the plugin developer ,not avail
Tried using import VueGallery from "v-gallery"; to import in Sfc same failed
Link to github repo to reproduce
I'm creating a Bootstrap Vue application (built with Vue CLI), and there's a Javascript library I want to be able to utilize: https://nadchif.github.io/html-duration-picker.js/. I tried putting the file in /assets and then using import in the script portion of App.vue (import './assets/html-duration-picker.min'), but I have not been able to get the script to work, not sure why (nothing happens, no duration picker shows). As an alternative, I thought I could maybe simply load the library in the traditional way in the head of index.html. But I'm not clear what the src URL should be for a file in the assets directory. Or should it be in the assets/public directory?
Honestly, you might as well use the npm package, if you are using Vue CLI, to save yourself a lot of trouble:
npm i html-duration-picker
DOCUMENTATION.md is where the installation instructions lie. While there aren't any for Vue, there are instructions for Angular, and it's fairly easy to get it working for Vue.
Just import html-duration-picker:
import * as HtmlDurationPicker from "html-duration-picker";
...and initalize it in mounted():
mounted() { HtmlDurationPicker.init() }
You can also run HtmlDurationPicker.refresh(); to "update dynamically loaded input boxes." I don't think this is necessary if you use v-model to bind the boxes' values to data properties which update fine from either end.
Here's a sandbox you can check out for more info.
If you do want to import it manually from assets, though, then what you're doing is probably fine (though you might need to add the .js to then end of the path); you'll just have to initialize it.
I'm having a Nuxt.js project where I try to use the qrcode-scanner library
I fallow the steps to register globaly.
I made a js file in plugins folder and add the fallowing code
import Vue from "vue";
import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);
It looks pretty straight forward, but my app crashes and never loads. Anyone experienced this problem ?
i test your code and it works for me by the way i explain my steps for you, maybe you forget one step:
install package with npm install vue-qrcode-reader
make file named qr.js in my plugin folder
then put this code on it:
import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'
Vue.use(VueQrcodeReader)
add plugin to my nuxt.config.js file :
plugins: ['~/plugins/qr']
NOTE:qr is the name of my file(qr.js)
use the plugin in my vue page with adding following code in it's place:
<qrcode-stream></qrcode-stream>
<qrcode-drop-zone></qrcode-drop-zone>
<qrcode-capture></qrcode-capture>
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.
I'm new to Aurelia, so I'm not really sure how this should work. I created a new Aurelia project and also installed bootstrap simply by doing jspm install bootstrap. I saw in console that this also pulled in jquery 3.0.0.
Now my question is, how do I use bootstrap.css, bootstrap.js and jquery.js in my project?
First attempt:
In app.html I tried to do thhe following:
<require from="bootstrap"></require>
I tried that because I have the following line in my config.js:
map: {
...
"bootstrap": "github:twbs/bootstrap#3.3.6",
...
}
This sort of works in the sense that it loads bootstrap.js, but then gives an error in browser that it's missing jquery.js. So it's not automatically loading jquery for me. Is this normal?
Second attempt:
I changed my require to this in app.html:
<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>
I'm not sure how it knows where to look for the bootstrap.js and bootstrap.css file, since they are located in: jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css etc. But it knows how to find the bootstrap files. But not the jquery file.
I have this in my config.js for jquery:
map: {
...
"github:twbs/bootstrap#3.3.6": {
"jquery": "npm:jquery#3.0.0"
},
....
}
So basically my question is, how should this work? Should require autoload all the necessary files when I <require from="bootstrap">. Or should I still load them as individual files? If so, how do I then load jquery in this case?
The require element is for pulling in Aurelia components, html templates (which are Aurelia components), or css files. It isn't for loading javascript files.
The Aurelia skeleton shows how to load Bootstrap in its main.js file:
import 'bootstrap';
is the first line in the file. This will initialize Bootstrap's javascript code.
In app.html a require element is used to load Bootstrap's css:
<require from="bootstrap/css/bootstrap.css"></require>
Importing jQuery in to a file is pretty simple as well:
import $ from 'jquery';
Then you can use the $ function however you would like.
I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-
To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
npm install bootstrap --save
Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:
npm install jquery#^2.2.4 --save
then restarted the app as packages were updated and ran it again ... FIXED!
after adding
import 'bootstrap';
in main.js, you may need to stop the app (Ctrl + c) and run it again with
au run --watch
to make it work.