"vue": "^2.6.14" "deslizamiento": "^7.0.5",
import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css';
Intento importar por defecto como en el ejemplo pero:
No se encontraron estas dependencias:
Para instalarlos, puede ejecutar: npm install --save @/swiper/css swiper/vue
trato de instalar:
npm install --save @/swiper/css swiper/vue
pero aparece el siguiente error:
npm ¡ERROR! código ENOLOCAL npm ERR! No se pudo instalar desde "@\swiper\css" ya que no contiene un archivo package.json.
npm ¡ERROR! Puede encontrar un registro completo de esta ejecución en: npm ERR! C:\Usuarios\A262556\AppData\Roaming\npm-cache_logs\2021-09-14T13_57_46_048Z-debug.log
Parece que hay un problema continuo con la última versión de Swiper con respecto a la importación de módulos.
Por el momento, le aconsejo que use Swiper v6 como una solución rápida, pero debe intentar ver qué está causando este problema (podría estar relacionado con su paquete).
npm i swiper@^6.8.4
Use importaciones de estilo directo como se muestra en este ejemplo para React :
import 'swiper/swiper.scss'; // core Swiper import 'swiper/modules/navigation/navigation.scss'; // Navigation module import 'swiper/modules/pagination/pagination.scss'; // Pagination module
La solución fácil para Swiper 7.4.1 en Vue 3 + Vite y compilar con Webpack es usar alias.
Todos estos archivos se encuentran en la estructura base:
vite.config.js
import path from "path"; export default defineConfig({ resolve: { alias: [ { find: "@", replacement: path.resolve(__dirname, "src"), }, { find: "@SwiperBundleCss", replacement: path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"), }, { find: "@SwiperBundle", replacement: path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"), }, { find: "@Swiper", replacement: path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"), }, { find: "@SwiperVue", replacement: path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"), }, ], }, plugins: [ViteRequireContext(), vue()], });
jsconfig.json
{ "include": [ "./src/**/*" ], "compilerOptions": { "baseUrl": ".", "target": "esnext", "module": "es2015", "paths": { "@SwiperBundleCss": ["./node_modules/swiper/swiper-bundle.min.css"], "@SwiperBundle": ["./node_modules/swiper/swiper-bundle.esm.js"], "@Swiper": ["./node_modules/swiper/swiper.esm.js"], "@SwiperVue": ["./node_modules/swiper/vue/swiper-vue.js"], } } }
vue.config.js
const path = require("path"); module.exports = { publicPath: "/", … configureWebpack: { resolve: { alias: { "@SwiperBundle": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"), "@SwiperBundleCss": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"), "@Swiper": path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"), "@SwiperVue": path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"), }, }, }, };
webpack.config.js
const path = require("path"); … mode: "production", stats: "errors-only", resolve: { alias: { "@SwiperBundle": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"), "@SwiperBundleCss": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"), "@Swiper": path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"), "@SwiperVue": path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"), }, }, …
Y finalmente cómo declarar en tu proyecto.
main.js
… import "@SwiperBundleCss"; //import css import { Swiper, SwiperSlide } from "@SwiperVue"; //import component import SwiperCore, { Pagination, Scrollbar } from "swiper"; //import swiper core and plugins SwiperCore.use([Pagination, Scrollbar]); //declare two plugins const app = createApp(App) .use(router) … .component("swiper", Swiper) //declare vue component .component("swiper-slide", SwiperSlide) //declare vue component … .use(devtools); router.isReady().then(() => app.mount("#app"));
Uso en sus archivos .vue
some_view.vue
<template> <div> <!—// … //—> <swiper :scrollbar="{ hide: false, }" :slides-per-view="isMobileScreen" :space-between="10" :grabCursor="true" :loop="true" > <swiper-slide> <img src=“some_image.jpg" alt="" /> </swiper-slide> <swiper-slide> <img src=“some_image.jpg" alt="" /> </swiper-slide> <swiper-slide> <img src=“some_image.jpg" alt="" /> </swiper-slide> </swiper> <!—// … //—> </div> </template>
Puede leer más información sobre los alias allí mismo:
Saludos