Nuxt.js + Framework7?

Hello!

Question from a novice: how to add the Framework7 to Nuxt.js, and use like Vuetify?

Thank you.

I added F7 as plugin according Nuxt manual: https://nuxtjs.org/guide/plugins/#vue-plugins

(clik to open big image)

I’m novice. What is cause of this problem? Thanks!
Можно на русском )

Did you check this package from Nuxt https://github.com/nuxt-community/nuxt7 ? Maybe it is not too up to date, but you can use it for reference for sure

Yes, I have checked “nuxt7” from https://github.com/nuxt-community/nuxt7

The result the same :frowning:

Hi,
Did you find the solution for this. I am also wondering how to achieve this? I want to use Framework7 for the WebApp using Nuxt (SSR).

Hi,
I have set mode:‘spa’ in nuxt.config.js and Framework7 elements seems to work. I’m novice, I don’t know whether to expect a conflict between < f7-view> and < nuxt /> or not. Or what best way to realize route and view in nuxt+f7. Would be good if Nuxt team added Framework7 in Nuxt install setup, like Vuetify, BootstrapVue and others. Framework7 looks awesome, best app UI tools what i have seen.

Hi,

I found it working with Framework7 version 4 but when I upgraded the npm packages for Framework7 and Framework7-Vue (ie version 5 (5.7.0)) to the latest version it throws the following errors:
:heavy_multiplication_x: Client
Compiled with some errors in 8.40s

ERROR Failed to compile with 2 errors friendly-errors 15:03:10

ERROR in …/.nuxt/framework7/styles.less friendly-errors 15:03:10

Module build failed (from ./node_modules/less-loader/dist/cjs.js): friendly-errors 15:03:10

^
Cannot use import statement outside a module
in /home/kush/f7apps/nuxtapps/webapp7/node_modules/framework7/components/swiper/swiper-src/less/plugin.js (line null, column -1)
friendly-errors 15:03:10

ERROR in …/.nuxt/framework7/styles.less friendly-errors 15:03:10

Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js): friendly-errors 15:03:10
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):

^
Cannot use import statement outside a module
in /home/kush/f7apps/nuxtapps/webapp7/node_modules/framework7/components/swiper/swiper-src/less/plugin.js (line null, column -1)
at /home/kush/f7apps/nuxtapps/webapp7/node_modules/webpack/lib/NormalModule.js:316:20
at /home/kush/f7apps/nuxtapps/webapp7/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/kush/f7apps/nuxtapps/webapp7/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/kush/f7apps/nuxtapps/webapp7/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:97:5)
friendly-errors 15:03:10
@ …/.nuxt/App.js 4:0-34
@ …/.nuxt/index.js
@ …/.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client …/.nuxt/client.js

I have already raised an issue @ https://github.com/nuxt-community/nuxt7 but did not receive any response.
Would anyone please help on this.

Regards