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>
Related
I am attempting to move from webpack to vite (3.1.8). (in the context of a Rails app, actually webpacker)
I use video.js. With webpack, in a .js file, I am able to both import video.js javascript, and import the CSS packaged with video.js from the javascript file, like so:
import videojs from 'video.js';
require('!style-loader!css-loader!video.js/dist/video-js.css')
The require like that isn't supported in vite. Normally in vite you can import CSS no problem, and it'll even be automatically spit out into a <style> tag. As simple as, say, import './some.css'`
But when the CSS is from an npm dependency like video.js... how do I import it?
I tried simple import 'video.js/dist/video-js.css';, as well as import '#video.js/dist/video-js.css';, neither worked. In dev, both just say "Rollup failed to resolve import" upon asking vite to vite build --development.
What is the right way to do this?
I want to use an Vue package like this
Vue.use(npmPackageName)
but when I import vue form 'vue' this message appear "Can’t resolve vue"
my question is how can I use npm package in the administration component?
thanks a lot.
this is the npm_modules folder
and this is the webpack.config.js file
here is how i try to import and use it
Yes, you can.
You have to add the package to your own module's package.json and the build-administration.sh would install the dependencies.
This works only, if jq is installed on your system - otherwise a warning is printed which can be overseen easily.
i am a complete beginner in JavaScript and Vue.js. I started a Vue.js project with vue-cli yesterday, because I need it for my job and I ran into some problems. I wanted to install "pretty-checkbox-vue" and it is currently in my 'node_module' folder.
In the README.md of the Gitrepo for this package it says :
Browser
Include the script file, then install the component with Vue.use(PrettyCheckbox); e.g.:
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
<script type="text/javascript">
Vue.use(PrettyCheckbox);
</script>
Module
import PrettyCheckbox from 'pretty-checkbox-vue';
Vue.use(PrettyCheckbox);
The questions are :
Where do I put these code snippets in ? \
I have a main.js and App.vue.
And if I write import PrettyCheckbox from 'pretty-checkbox-vue'; in my main.js I get a "could not find a declaration file for module 'pretty-check-box'" message.
Is this message normal, becaus I haven't included the script file ?
Thank you in advance!
EDIT :
main.js :
import Vue from 'vue'
import App from './App.vue'
import PrettyCheckbox from 'pretty-checkbox-vue';
Vue.use(PrettyCheckbox);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Folder Structure
Project_folder
node_modules
pretty-checkbox
pretty-checkbox-vue
src
main.js
App.vue
public
index.html
If you're planning to use that component globally inside your app, and you're a beginner, I'd recommend you install it as a module. First, run npm i --save-dev pretty-checkbox-vue in your project folder. Make sure you've installed the package on your project directory, so pretty-checkbox-vue is actually on node_modules folder of your specific project with all other project dependencies, not just a random folder elsewhere.
Then just paste this code
import PrettyCheckbox from 'pretty-checkbox-vue';
Vue.use(PrettyCheckbox);
in main.js
Make sure all your imports are there before the rest of your code starts.
After the installation, just follow the instructions and use that component in any template throughout the project.
If you're getting errors while in development mode, try npm install on your project and npm run serve again.
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.
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.