We Keep Coding

Need help help knowing where to import Swiperjs

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.

Error: Could not find declaration file for module VueJS application

Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks

The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.

How do i import my file to app.js using javascript?

I'v been trying to import a javascript file to app.js found in create-react-app package. I used this code to import my file :
note:my file is located in a folder called components where you find the folder Navigation and its in that folder.
import script from './components/Navigation/script;
and i exported the file using :
export default App;
but in my terminal i got an error saying
Module not found : cant resolve'./components/Navigation/script'
Could someone please tell me how i can fix this error.
Thank you in advance :-)

You got the syntax wrong.
import script from './components/Navigation/script;
actually imports the default export from script.js
export default function() {}
You can also import named exports like this:
import {something} from "./script.js"
Which imports
const something = 42;
export something;
I guess you could import js(and css) files with
import "./scripts.js" //or import "./style.css"
But you generally want to export individual functions, values etc.
You can also import everything from a module like this
import * as React from "react";
But create-react-app configuration allows you to use this as
import React from "react"; //Internally equals to import * as React from "react";

Module not found: Error: Can't resolve | Vue Router

I am new to vue and laravel. I am trying to import my component but I am getting this error.
ERROR in ./resources/js/router.js
Module not found: Error: Can't resolve './pages/frontend/HomepageComponent'
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomepageComponent from './pages/frontend/HomepageComponent'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: HomepageComponent
}
]
export default new VueRouter({
routes
})
I searched everywhere but I am not being able to figure out how to solve this issue.
Please help me.

Run Command
npm install --save vue-router

Try adding .vue to your import of the file
import HomepageComponent from './pages/frontend/HomepageComponent'
so it looks like:
import HomepageComponent from './pages/frontend/HomepageComponent.vue'
If I'm not wrong, the import will by default look for a .js file extension, so you have to be specific that you are looking for a .vue file.
EDIT: Solution was unrelated to the answer above, the problem was a typo in the components file name.

I resolved the problem with
npm install --save vue-router

I had the same issue, solved by creating another folder under assets folder and moving components there.

Injecting a module into angular as module not found

I can't seem to inject a module into my angular app.
I am trying to import the following module which is installed through bower using:
bower install angular-pagedown --save
This seems to load fine within the bower-components folder which is in the following folder structure:
clinet
------app
---------bower-components
-------------------angular-pagedown
-------------------pagedown
When I try inject the module as it says in the instructions using 'ui.pagedown' which is indeed the name of the module, I use the following code in app.js:
import _Auth from '../components/auth/auth.module';
import account from './account';
import admin from './admin';
import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import questionsCreate from
'./questionsCreate/questionsCreate.component';
import questionsShow from './questionsShow/questionsShow.component';
import constants from './app.constants';
import util from '../components/util/util.module';
import socket from '../components/socket/socket.service';
import './app.scss';
angular.module('filQuestionsApp', [ngCookies, ngResource, ngSanitize,
'btford.socket-io', uiRouter,
uiBootstrap, _Auth, account, admin, 'validation.match', navbar,
footer, main, questionsCreate,
questionsShow, constants, socket, util, 'ui.pagedown'
])
I seem to get the following error when trying to use the module:
Module 'ui.pagedown' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I seem to be doing something really wrong with bower and angular together, I'm also getting 400 errors in terms of formatting and I'm not sure on the injection process.

How angular-pagedown work:
bower install angular-pagedown --save
This will also install pagedown dependencies.
Import these files in your HTML:
pagedown/Markdown.Converter.js
pagedown/Markdown.Sanitizer.js
pagedown/Markdown.Extra.js
pagedown/Markdown.Editor.js
angular-pagedown/angular-pagedown.js
angular-pagedown/angular-pagedown.css
If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually.
But add this in your bower.json
"overrides": {
"pagedown": {
"main": [
"Markdown.Converter.js",
"Markdown.Sanitizer.js",
"Markdown.Extra.js",
"Markdown.Editor.js",
"wmd-buttons.png"
]
}
}
Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);