How to use the IQKeyboardManager Plugin with Vue.js


Hi, guys.

I tried to use the NativeScript IQKeyboardManager Plugin in my Vue.js application without success. I followed the docs, registered the plugin adding the line Vue.registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager").PreviousNextView) in my app.js file, built on my iPhone and nothing happened. Am I missing something?

Thanks in advance.


Are you saying the PreviousNextView component was not working Or the keyboard toolbar itself never appears?


I have the same issue I believe, however I also got an error in the console:

JS ERROR ReferenceError: Can’t find variable: IQKeyboardManager

I registered the plugin the same way you did, perhaps there is an issue with the plugin itself?


Thats simply the usual, try deleting your platforms folder and run the again.


Thanks for your suggestion, the problem persists though after deleting platforms and rebuilding the project :confused:


The only reason it can say that error is your native iOS library (via POD) not installed properly and not a issue with plugin. When you do tns run ... after deleting platforms folder, you must see pods being installed through the logs.


Hi, @manojdcoder!

The keyboard appears but keeps hiding the TextField when I only register the plugin. If I try to use the tag <PreviousNextView> in my page, then the app crashes.

Here’s the code in main.js:

import Vue from 'nativescript-vue';
import router from './router';
import './styles.scss';

Vue.registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager").PreviousNextView)

// Uncommment the following to see NativeScript-Vue output logs
// Vue.config.silent = false;

new Vue({



Here’s the code in my .vue file:

    <ActionBar title="Login"/>

        <StackLayout class="container">
            <Label textWrap="true" text="Type your name and e-mail:"  />

                 <FloatLabel v-model="" placeholder="Name" />
                 <FloatLabel v-model="" placeholder="E-mail" />
            <Button text="Send" @tap="onButtonTap" />


Notice that my TextFields are actually custom components.

This is the error in Xcode console while trying to run the project on my iPhone:

file:///app/app.js:1:169767: JS ERROR ReferenceError: Can't find variable: IQPreviousNextView
warning: could not execute support code to read Objective-C class data in the process. This may reduce the quality of type information available.

Thanks in advance!


Can you try reproducing the issue with playground?


In Playground it works like a charm, it doesn’t need to install any plugin. That’s why is so frustrating. :frowning:


The plugin is pre-installed in Playground app so you don’t have to explicitly install it. I’m using that plugin in every app, it works always.


It works only on Android or on iPhone as well? Did you make something different of what I’ve shown you in my code?

It’s weird because @Reached has faced the same problem.


IQKeyboardManager is for iOS only, Android by default have options to handle scrolling / screen resizing when keyboard is open.


Yeah, I know about that on Android. But did you have tested this plugin on an iOS physical device yet? It doesn’t work on my iPhone. Do I need to make something different on my code?

Are you using NS with Vue?

Thanks in advance for your time and support.


Fixed the problem by running npm run clean. Thanks.


I will try that as well, thanks!