I made an app in Vue.js that I'm trying to adapt in Nuxt.js. For the scrollspy I used jquery.easing
in Vue.js so I wanted to do the same in Nuxt.js.
A little like you import jQuery in Vue.js main.js
file, I created a plugin in Nuxt to add jQuery and require("jquery.easing")
:
plugin/jqueryeasing.js
import Vue from "vue";
import jquery from "jquery";
require("jquery.easing");
Vue.prototype.jquery = jquery;
I also linked it to my nuxt.config.js
file:
const webpack = require("webpack");
module.exports = {
/*
** Headers of the page
*/
head: {
title: "resume",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "undermaintenance" }
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
css: [
// this line include bootstrap.css in each html file on generate
"~/node_modules/bootstrap/dist/css/bootstrap.css",
// main css file in document
"assets/css/main.css"
],
/*
** Plugin section
*/
plugins: [
"~plugins/bootstrap.js"
"~plugins/jqueryeasing.js",
],
/*
** Build configuration
*/
build: {
/**
* add external plugins
*/
vendor: ["jquery", "bootstrap"],
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
})
],
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
}
}
};
jQuery is working like a charm with my Bootstrap.
I don't know why but I'm having this
typeError: $.extend is not a function.
It comes from my node_modules/jquery.easing/jquery.easing.js
file.
$.extend($.easing, {
def: "easeOutQuad",
swing: function(x) {
return $.easing[$.easing.def](x);
},
easeInQuad: function(x) {
Version information:
"jquery": "^3.3.1",
"jquery.easing": "^1.4.1"
I've tried to:
"jquery-ui": "^1.12.1"
,nuxt.config.js
file onlyjQuery.easing
What am I doing wrong and how come it works in Vue.js?
If you are using Jquery-easing the simple way is to add it like this :
1- Inside your nuxt.config.js
script: [
{
src:
'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'
}
]
J-query and Nuxt.js are not best friends.
I used a plugin called vuetifyjs. You will find a scroll goTo
function where you can fix options including smooth scrolling (using built-in easing functions), duration and offset.
This is the link to the documentation: https://next.vuetifyjs.com/en/framework/scroll
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.