Need help help knowing where to import Swiperjs - javascript

Like the title says, I'm in need of help knowing to import swiperjs. I'm fairly new to Javascript so I'm still learning the ropes.
I've already installed it via NPM and if you read the document is says "By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too". My problem and question is how and where? Do I go to configure them? Do I go inside Swiperjs core.js and configure it there or do I use my current app.js and add the import there? or make a new js file and do it there?
Thank you for taking the time to answer my question.
Ps: All I'm using is html, css, sass, javascript, Jquery as a framework and using Babel

You can import Swiperjs inside your app.js if that is your main file.
You import it with this code:
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);

If anyone not using webpack then just use require
const Swiper = require('../../node_modules/swiper/swiper-bundle');
Note: correct the path of your node_modules folder. For me, nothing worked above.

Related

Is there a way to use the screenfull javascript library within the Nextjs framework?

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?

Create-react-app javascripts calling each others' functions not working

I am learning React.js with the create-react-app framework.
I need to use a readymade admin template which has javascript files calling other JS files' modules.
e.g.
In App.js I have:
1. import $ from 'jquery'
2. import Layout from './css/layout.min.js'
3. import Navbar from './js/navbar.min.js'
In navbar.min.js, I am getting an error:
1. $ is not defined
2. Layout (a function of layout.min.js) is not defined
There are hundreds of such modules so manual import from each JS is not an option.
So far I've tried exporting $, Layout from App.js but no results.
Any help would be appreciated.
You should do ( id you didn't)
npm i jquery --save
And in your layout.min.js you should have export default.
Btw, maybe it should be import Layout from './js/layout.min.js'?

How to import vue plugins installed with npm

I am sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?
Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'

Foundation 6.4 app.js Handpick components with import

Using the new Panini Zurb template with webpack.
It is not clear yet how to handpick modules/components following the one line of instructions they provide in app.js:
import $ from 'jquery';
// import whatInput from 'what-input';
window.$ = $;
// import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out
the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';
import {Tabs} from './lib/foundation-explicit-pieces';
$(document).foundation();
// if($('#about-tabs').length) {var _tabs = new Foundation.Tabs($('#about-tabs'));}
link to the section:
github repo
And at this point it's working, but it seems like everything in foundation is packaged resulting in a ~270KB file.
I'm definitely not aware of all the aspects of import/export, any suggestion on a comprehensive source will be very appreciated.
Apparently it was intuitive enough, in the support file it's enough to comment out the single imports.
With all out but 1 component the filesize becomes still ~160KB after build.
Any way to tree shake more? It's basically the same as the previous version without webpack

How do I require a file in meteor 1.3?

I'm trying to use react-datepicker in a meteor 1.3 and react project.
Everything is working fine except that I don't have access to any of the css in the package. The readme says I need to require the css file from the package.
If I wasn't using meteor I could start the file with:
var React = require('react');
var DatePicker = require('react-datepicker');
var moment = require('moment');
require('react-datepicker/dist/react-datepicker.css');
Since this is meteor 1.3 I started it with
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
I don't know how to require the css file. Can anybody explain this?
The only workaround I found was using relative paths inside an .scss file.
#import "./../../../../node_modules/react-date-picker/base.css";
#import "./../../../../node_modules/react-date-picker/theme/hackerone.css";
Ugly as f***, I know, but it works.
import 'react-datepicker/dist/react-datepicker.css'; worked!
Thanks #apendua

Categories