I'm learning Laravel + Vue by writing an app using Inertia and Mix.
I'm using a bootstrap theme which includes smooth scolling
When I copy the smooth-scroll files to the /public directory and link to it in my app.blade.php view file thenit all works.
But I would like to use the module installed by npm (npm install smooth-scroll).
I've done a file compare on the node_modules/ copy with the copy from the bootstrap theme's dist folder and there's no difference in the contents.
I'm not sure how to actually use the node_modules copy though.
I get an error:
theme.js?id=f3b758e4edb78899ef490cc326d24b7b:372 Uncaught ReferenceError: SmoothScroll is not defined
at theme.js?id=f3b758e4edb78899ef490cc326d24b7b:372:18
at theme.js?id=f3b758e4edb78899ef490cc326d24b7b:379:4
at theme.js?id=f3b758e4edb78899ef490cc326d24b7b:1117:3
at theme.js?id=f3b758e4edb78899ef490cc326d24b7b:1118:12
In my app.blade.php file I have the theme.js added in just before the closing body tag:
<script src="{{ mix('/js/theme.js') }}" defer></script>
I'm not sure how to actually get this page to use the smooth-scroll module.
I've tried to import it in both the app.js and Home.vue files:
import { SmoothScroll } from 'smooth-scroll';
// also tried like this
// import 'smooth-scroll';
I do see the SmoothScroll code in /app.js when I've run npx mix, but no joy.
Related
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'm trying to read the content of a markdown file (.md) stored in statics or assets folder of my quasar project and I have updated the quasar.conf.js file with the following change to support raw file loading after adding raw-loader to my project
extendWebpack(cfg) {
cfg.module.rules.push({
test: /\.md$/i,
use: "raw-loader"
});
I'm trying to load the markdown, using import command from one of the .vue component script tag as below
import md from "~statics/help.md";
But when I run the project, it compiles to 100% and throws the below error
• Compiling:
└── SPA ████████████████████ 100% done in ~13s
ERROR Failed to compile with 1 errors 8:22:43 AM
This dependency was not found:
* ~statics/help.md in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/#quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Help.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ~statics/help.md
let me know if any solution
Its seems like quasar can't find the proper reference since I don't know your exact folder structure
Try using ../static/{filname} and see if it works
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've build a Vue JS 2.x plugin using the vue create <my-plugin-name> and the vue-cli-plugin-p11n plugin. I have a directory structure that consists of a dist/ directory with a few compiled JS files and a main src/ folder containing my components.
I'd like to use these components within Nuxt JS 2.4.x.
I've created a plugins/LesForm.js plugin, and have added '#/plugins/LesForm' to my array of plugins within nuxt.config.js.
My plugin file consists of:
import Vue from 'vue'
import LesForm from 'LesForm'
Vue.use(LesForm)
I'm then trying to import the plugin with it's component into a page by doing: <LesForm></LesForm> within my page.
I initially get the error of:
Failed to mount component: template or render function not defined., but adding the following to my script tag of a page seems to remove that error, but this doesn't seem right?
<script>
import LesForm from 'LesForm'
export default {
components: {
LesForm
}
}
</script>
without this, my page breaks, and adding it I get: Failed to mount component: template or render function not defined. as an error with no sign of my Vue plugin that I've made with some markup.
I'm using the Vue Cli service to build my plugin via NPM.
Attached is a screenshot of my plugin directory structure:
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.