Vue.js pretty-checkbox-vue install and get it to run

Question

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

Ogulcan Tümdoğan · Accepted Answer · 2020-09-30 14:56:09Z

0

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.

answered Sep 30, 2020 at 14:56

Ogulcan Tümdoğan

1115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

desch142 Over a year ago

Thank you for your answer. I already installed it and it is in my current project folder in node_modules. However, if I paste the code you suggested in the main.js then in the import PrettyCheckbox from 'pretty-checkbox-vue' I get 3 grey dots under 'pretty ...' and once I hover over the points i get the message described in the beginning

Ogulcan Tümdoğan Over a year ago

Can you provide your main.js file, and maybe your Project folder structure? I think I can help better that way. Also, do you need this component globally? If not, maybe you can only import it in pages you will need. You can also just add the "Browser" inside your public folder -> index.html, paste it at the end of your <body> content, instead of module imports.

Collectives™ on Stack Overflow

Vue.js pretty-checkbox-vue install and get it to run

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related