danielroe / nuxt-ionic Goto Github PK

View Code? Open in Web Editor NEW

278.0 8.0 23.0 2.37 MB

Batteries-included, zero-config Ionic integration for Nuxt

Home Page: https://ionic.nuxtjs.org

License: MIT License

JavaScript 2.45% TypeScript 60.95% Vue 36.60%

ionic nuxt android ios mobile nuxt-module hacktoberfest

nuxt-ionic's Introduction

Nuxt Ionic

Ionic integration for Nuxt

Features

⚠️ @nuxtjs/ionic is currently a work in progress. ⚠️

Zero-config required
Auto-import Ionic components, composables and icons
Ionic Router integration
Pre-render routes
Mobile meta tags
PWA support with nuxt-pwa-module
Works out-of-the-box with Capacitor to build mobile apps

In progress

PWA Elements #14

Usage

👉 Check out https://ionic.nuxtjs.org.

💻 Development

Clone this repository
Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
Install dependencies using pnpm install
Stub module with pnpm dev:prepare
Run pnpm dev to start playground in development mode

License

Made with ❤️

Published under the MIT License.

nuxt-ionic's People

Contributors

Stargazers

Watchers

nuxt-ionic's Issues

📚 Is your documentation request related to a problem?

I created a new project via:

npx nuxi init -t v3 audio-flashcards-nuxt
cd audio-flashcards-nuxt
yarn add --dev nuxt-ionic

I edited nuxt.config.ts to:

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ["nuxt-ionic"],
});

When I run yarn run dev the console shows:

yarn run v1.22.18
$ nuxt dev

Nuxt CLI v3.0.0-rc.4                                                                                                                                                         06:26:41
                                                                                                                                                                             06:26:41
  > Local:    http://localhost:3001/ 


 WARN  [PWA] Icon not found at /Users/saschwarz/dev/audio-flashcards-nuxt/public/icon.png                                                                                    06:26:44

ℹ Vite client warmed up in 748ms                                                                                                                                             06:26:46
ℹ Vite server warmed up in 123ms                                                                                                                                             06:26:46
✔ Vite server built in 1632ms                                                                                                                                                06:26:47
✔ Nitro built in 358 ms                                                                                                                                                nitro 06:26:48
[nuxt] [request error] Cannot read properties of undefined (reading 'forEach')
  at createRouterMatcher (./node_modules/vue-router/dist/vue-router.cjs.js:1485:12)  
  at Module.createRouter (./node_modules/vue-router/dist/vue-router.cjs.js:2819:21)  
  at Module.createRouter (./.nuxt/dist/server/server.mjs:3468:42)  
  at ./.nuxt/dist/server/server.mjs:2487:40  
  at fn (./.nuxt/dist/server/server.mjs:380:27)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:41:19)  
  at callWithNuxt (./.nuxt/dist/server/server.mjs:382:23)  
  at applyPlugin (./.nuxt/dist/server/server.mjs:337:29)  
  at Module.applyPlugins (./.nuxt/dist/server/server.mjs:347:11)  
  at async createNuxtAppServer (./.nuxt/dist/server/server.mjs:46:7)
[nuxt] [request error] Cannot read properties of undefined (reading 'forEach')
  at createRouterMatcher (./node_modules/vue-router/dist/vue-router.cjs.js:1485:12)  
  at Module.createRouter (./node_modules/vue-router/dist/vue-router.cjs.js:2819:21)  
  at Module.createRouter (./.nuxt/dist/server/server.mjs:3468:42)  
  at ./.nuxt/dist/server/server.mjs:2487:40  
  at fn (./.nuxt/dist/server/server.mjs:380:27)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:41:19)  
  at callWithNuxt (./.nuxt/dist/server/server.mjs:382:23)  
  at applyPlugin (./.nuxt/dist/server/server.mjs:337:29)  
  at Module.applyPlugins (./.nuxt/dist/server/server.mjs:347:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

If I paste the default ionic settings into nuxt.config.ts and disable router the error disappears.

🔍 Where should you find it?

No response

ℹ️ Additional context

No response

Middleware Doesnt Seem To Work With Nuxt Ionic

🐛 The bug

middleware is not being called

🛠️ To reproduce

go to tab 3
click the button
middle ware should redirect to index

https://stackblitz.com/edit/github-jxba2j?file=pages/tabs/tab3.vue

🌈 Expected behaviour

middleware to be called

ℹ️ Additional context

No response

fix: routing is not working & ionicons not importing correctly

🐛 The bug

routing is absolutely broken with me, in addition to the issue that nothing works unless i install @ionic/vue
and icons are not importing correctly

icons error:

what happens when I change tabs:

as you can see the tabs just get displayed together

if I change tabs again this comes in the console:

app.vue:

<template lang="pug">
ionApp
  UiTabs
</template>

components/Ui/Tabs.vue:

<template lang="pug">
ionPage
   ionTabs
      ionRouterOutlet
      //- https://ionicframework.com/docs/vue/navigation#working-with-tabs
      ionTabBar(slot="bottom")
         ionTabButton(tab="home" href="/tabs/home")
            ionIcon( :icon="ioniconsHome" )
            ionLabel Home
         ionTabButton(tab="schedule" href="/tabs/schedule")
            ionIcon( :icon="ioniconsCalendar" )
            ionLabel Schedule
</template>

pages/tabs/Home.vue

<template lang="pug">
h1 this is the home tab
</template>

pages/tabs/Schedule.vue

<template lang="pug">
h1 this is the schedule tab
</template>

🛠️ To reproduce

https://github.com/NyllRE/ionic-nuxt-3

🌈 Expected behaviour

tabs change correctly
icons get imported and displayed

ℹ️ Additional context

I tried to remake the project multiple times and these errors keep coming, I install @nuxtjs/ionic and no component is known, I install @ionic/vue and the routing is broken, I install @ionic/vue-routing and the ionicons are not working and the routing is broken. nothing seems to be working fine with my experience

404 Error with Documentation Page

📚 Is your documentation request related to a problem?

When clicking on the Get Started Button, I am getting a 404 Error

🔍 Where should you find it?

No response

ℹ️ Additional context

No response

feat: ability to configure @ionic/vue install config options

🆒 Your use case

From Ionic docs:
"Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more."
In my case I want to use ios mode globally in app, but this can't be done through this nuxt module.

🆕 The solution you'd like

Add @ionic/vue install config options in this module option

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

Integrating Ionic PWA Elements

🐛 The bug

reference - https://capacitorjs.com/docs/web/pwa-elements

The PWE Elements for Capacitor Components need to be installed and initialized in the vuejs application.

The current solution I have implemented is to add the following to the page where I need to use one of them

  <Html>
    <Head>
      <Script
        type="module"
        src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
      ></Script>
      <Script
        nomodule
        src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
      ></Script>
    </Head>
  </Html>

🛠️ To reproduce

https://stackblitz.com/edit/github-eahsnx?file=pages/tabs/tab2.vue

🌈 Expected behaviour

It would be nice if the module integrated this into the code so it wouldn't need to be configured manually

ℹ️ Additional context

No response

docs: Motivations behind this package and limitations

📚 Is your documentation request related to a problem?

I personally would like to know what are the motivations behind this package, and what are the known limitations or limitations you have been thinking about. It seems quite obvious to me that the goal behind nuxt with ionic allows cross platform development with one codebase and still get the advantages of nuxt. To my understanding, just like with next.js in react world, people are mainly using nuxt for the developer experience and SSR/SSG for SEO performance. Correct me if I'm wrong, but SSR shines for unpredictable data (e.g. user generated data) and SSG shines for stable data. One of my main concern is: do SSR and SSG work in this package? There is this package in next world, but they say SSR doesn't work out of the box.

Lastly, are there any other undocumented known limitations?

Knowing and documenting those two points could help other developers have a sense of a kind of roadmap and contribute more easily perhaps.

🔍 Where should you find it?

Seems like one of the first things to tell. It's always good to start with WHY (see Simon Sinek) in my opinion.

ℹ️ Additional context

No response

Routing issue

🐛 The bug

Can anyone tell me what I am doing wrong with routing?!?! I have a Nuxt3/Capacitor project, and I just want to navigate to a page. nuxt-link just makes the new page appear under the home page. When I add the and tags in the page, the pages don't render.... until I remove the app.vue. Then everything works as expected.... but the default.vue template is no longer rendering again.... which was part of a previous bug @danielroe helped me with.

There HAS to be a magical combination where I can get the routing working with the default.vue template. I can't figure it out.

🛠️ To reproduce

routing broken with default.vue template:
https://stackblitz.com/edit/nuxt-starter-4c373a?file=package.json,nuxt.config.ts,pages%2Findex.vue,pages%2Fnew-page.vue

routing working, without default.vue template:
https://stackblitz.com/edit/nuxt-starter-6z9yld?file=temp_app.vue,pages%2Findex.vue,pages%2Fnew-page.vue

🌈 Expected behaviour

Using a nuxt-link component, navigate to(), or router.push() should just route to the desired page as normal.

ℹ️ Additional context

No response

docs: How can i emulate on Android emulator from Webstorm/PhpStorm

📚 Is your documentation request related to a problem?

I'm using PhpStorm in Windows 10 to work on my project. I installed Android Studio too.

On web browser 3000 port it works fine, but, device api are not available in browser, i need to really emulate on device.

I tried to add an "External tool"

It runs, but nothing happens on emulator

I'm missing something?! Is it possible? If yes, how? Which steps to follow...

Thanks

🔍 Where should you find it?

New section How emulate ?

ℹ️ Additional context

No response

help: CSS not loading for iOS

📚 What are you trying to do?

I've got a brand new nuxt app with the ionic module and when it launches the mobile app, the iOS version does not look like I would expect it to.

However, when I load the web version, it appears to be loading the right CSS.

🔍 What have you tried?

No response

ℹ️ Additional context

No response

fix: server side fetch

🐛 The bug

Fetching data on server side within ionic page component is not possible.

It can be observed in the repro attached that the fetch call happens on the client side only and therefore updating meta tags will have no effect for SEO, social media previews, etc

Server side code executes only in app.vue as far as I can see

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-gjtb8z?file=pages%2Fhead.vue

🌈 Expected behaviour

It's possible to provide code that's executed server side before entering the page.

ℹ️ Additional context

No response

type error on built-in ionic components (`property 'modelValue' is missing in type '{}'`)

📚 What are you trying to do?

Getting errors around the Ionic Components that were auto imported

🔍 What have you tried?

No response

ℹ️ Additional context

No response

docs: Ionic Variables and Theming

📚 Is your documentation request related to a problem?

I would like to change themes and css variables from ionic itself. On Ionic/Vue, it generate files ./src/theme/variables.css. But, i couldn't see the configuration in this (maybe, i missed something).

Actually, i would like to set base theme to force using light theme instead of dark by replacing with this @media (prefers-color-scheme: light)

🔍 Where should you find it?

Something in the feature page of the wiki, i guess.

ℹ️ Additional context

Here's the segment code from variables.css

 ....
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

@media (prefers-color-scheme: dark) {
  /*
   * -------------------------------------------
   */
...

fix: routes from nuxt config doesn't work

🐛 The bug

When i try to add any redirect to routes. It's completely ignored. I am aware of Page alias, but it dosen't work well with ionic since tabs items are not beeing selected.

🛠️ To reproduce

https://stackblitz.com/edit/github-rt1i5t?file=package.json,pages%2Ftabs%2Ftab1.vue,nuxt.config.ts

🌈 Expected behaviour

was able to add custom redirects for homepage as recomended here: https://ionicframework.com/docs/vue/navigation#handling-redirects

ℹ️ Additional context

No response

help: Best way for tabs? No pages/index.vue do not generate index.html upon build.

📚 What are you trying to do?

I tried following the playground's way to have tabs. But after running npx nuxi generate or npx nuxi build, it doesn't generate an index.html file so I cannot run npx cap sync since it needs the index.html.

EDIT: Based on the docs, it's not advised to use NuxtLayout. I tried using layouts but it does really mess up the routing.

🔍 What have you tried?

The only workaround is to have pages/index.vue as an onboarding page. But not all apps need that.

ℹ️ Additional context

No response

Incorrect viewport meta tags messes up IOS native deployment

🐛 The bug

You can only see the issue on the device, but it appears that the ios specific styling is not coming across in the build.

I took your sample playground code and deployed it to the device and this is what it looks like. it looks the way it should on Android

I spent the day trying to edit the module, but I am new to Nuxt modules so i am moving along slowly

🛠️ To reproduce

https://github.com/aaronksaunders/ionic-nuxt-playground

🌈 Expected behaviour

for app to render appropriately on device

ℹ️ Additional context

No response

Menu: must have a "content" element to listen for drag events on.fix:

🐛 The bug

Menu: must have a "content" element to listen for drag events on.

Menu component bug. Copy paste from https://ionicframework.com/docs/api/menu
ionic menu component to app.vue:
Only render first time then when refresh error appears "Menu: must have a "content" element to listen for drag events on."

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/ionic/tree/main/playground?file=package.json

🌈 Expected behaviour

render ok when refresh

ℹ️ Additional context

{
"name": "nuxt-ionic-project",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"ionic:build": "npm run build",
"ionic:serve": "npm run dev"
},
"devDependencies": {
"@nuxtjs/supabase": "^0.3.0",
"nuxt": "^3.2.2"
},
"dependencies": {
"@capacitor/android": "4.6.3",
"@capacitor/app": "4.1.1",
"@capacitor/camera": "4.1.4",
"@capacitor/cli": "4.6.3",
"@capacitor/core": "4.6.3",
"@capacitor/haptics": "4.1.0",
"@capacitor/keyboard": "4.1.1",
"@capacitor/status-bar": "4.1.1",
"@nuxtjs/ionic": "^0.8.1",
"@pinia/nuxt": "^0.4.6",
"@supabase/supabase-js": "^2.4.0"
}
}

fix: Style won't applied on the first page load

🐛 The bug

I'm trying this and got something weird. For some reason, the style won't applied correctly on the first page load but it's get loaded when I remove/add <ion-app> element in layouts/default.vue but when it's got refreshed the style disappear again. This happen both in yarn dev and yarn generate when served via caddy webserver.

🛠️ To reproduce

https://stackblitz.com/github/lazygeniusman/nuxt-ionic

🌈 Expected behaviour

The style applied correctly on the first load.

ℹ️ Additional context

No response

feat: ionic animation component

🆒 Your use case

Ionic recommends usage of it's own utilities for animations for inclusive platform compatibility and making sure custom animations don't interfere with route popping/pushing animations, so it would be convenient if nuxt-ionic could provide a component that will easily handle all this

Check official docs here

🆕 The solution you'd like

Ionic team already made something similar for react, and it could be a decent starting point:

<CreateAnimation
  duration={1000}
  fromTo={{
    property: 'opacity',
    fromValue: '1',
    toValue: '0.5'
  }}
>
...
</CreateAnimation>

Specific props and their handling is up to debate, but I reckon something like this could work

🔍 Alternatives you've considered

No response

ℹ️ Additional info

Would be more than happy to work on a PR if I receive a green light 😄

feat: Supporting Hot Reload

🆒 Your use case

Very interesting project @danielroe and the team. Thank you all.

I tried supporting hot reload to a nuxt/ionic project. Here's what I did:

Installing @ionic/cli as a dependency.
adding "ionic:serve": "nuxt dev" command in package.json.

That's it. It worked for me.

It's worth mentioning that when I tried to run the iOS Simulator, I saw this error message from Ionic VSCode Extension.

🆕 The solution you'd like

Supporting Hot Reload in a way that Ionic VSCode understands.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

fix: Empty `route.params` object on navigation

🐛 The bug

When navigating to a new page, the route.params object from useRoute is empty.

🛠️ To reproduce

https://stackblitz.com/edit/github-hz29vt?file=pages/tabs/tab1.vue

🌈 Expected behaviour

It should be an object with the current route parameters, query, etc.

ℹ️ Additional context

It works properly on 0.6.1.
After navigating, reloading the page makes the route.params object show the correct content.

fix: template/default.vue not rendering after module added

🐛 The bug

When I install and include @nuxt/ionic in the modules in the nuxt.config, everything in the default.vue template is ignored/does not render.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-6z4cfw?file=package.json,nuxt.config.ts,pages%2Findex.vue,layouts%2Fdefault.vue

🌈 Expected behaviour

the default.vue template should behave as normal. In this case, it would show a TEMPLATE MOUNTED and the fake HEADER and FOOTER

ℹ️ Additional context

No response

help: Unable to figure out how to install Nuxt and Ionic together

📚 What are you trying to do?

I tried to run:

npm init nuxt-app test
cd test
npm install @nuxtjs/ionic -D

I do not get a nuxt.config.ts file, but instead a nuxt.config.js file. When I add '@nuxtjs/ionic' to modules array I get:

> nuxt


 FATAL  Cannot read property 'optimizeDeps' of undefined                        00:46:35

  at setup (node_modules/@nuxtjs/ionic/dist/module.mjs:157:56)
  at ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:29)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:55:5)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)


   ╭─────────────────────────────────────────────────────────────────╮
   │                                                                 │
   │   ✖ Nuxt Fatal Error                                            │
   │                                                                 │
   │   TypeError: Cannot read property 'optimizeDeps' of undefined   │
   │                                                                 │
   ╰─────────────────────────────────────────────────────────────────╯

🔍 What have you tried?

I tried to also run npx create-nuxt-app test but results were the same

ℹ️ Additional context

Perhaps it's me. What else should I do to spin up a nuxt + ionic project?

UPDATE: When I ran npx nuxi init test I think I got a working project!

IonBackdrop doesn't load its style if used on app.vue

🐛 The bug

I want to use ion-menu on my app, and this component is supposed to sit next to ion-router-outlet. So I overrided my app.vue to include this in the template.

But apparently, it doesn't load the ionic component's styles properly, because the ion-backdrop (a child component of ion-menu) now displays above all components and make the app unclickable.

Note: if I move the ion-menu component inside a page instead of the app.vue, the styles are correctly loaded.

🛠️ To reproduce

https://stackblitz.com/edit/github-fcrwqw?file=pages/index.vue

🌈 Expected behaviour

I expect Ionic components to properly load there css style even when used from app.vue.

ℹ️ Additional context

No response

fix: @vueuse/head doesn't function properly with ionic

🐛 The bug

Hey!

Not using this project, but had a problem on another project I think you'll run into so figured I'd make you aware as it's not immediately obvious

https://ionicframework.com/docs/vue/lifecycle#how-ionic-framework-handles-the-life-of-a-page

The way ionic handles the lifecycle of a page is very different to how vue does it, and as a consequence of this, the onBeforeMount hook isn't always called when you'd expect it to be.

To replicate, go to the stackblitz below, inspect the <title> of the ionic app, and click between the first and second tabs a few times. You'll notice that the title stops updating. This is because the old tab still exists in the dom.

It looks like you can probably work around this by importing injectHead from @vueuse/head, onIonViewWillLeave from @ionic/vue and creating your own useHead function that handles the teardown (and setting up again, potentially) with the correct hook. I haven't actually tried this though as I gave up and went back to doing everything manually.

export const useHead = (obj: MaybeRef<HeadObject>) => {
  const headObj = ref(obj) as Ref<HeadObjectPlain>
  const head = injectHead()

  head.addHeadObjs(headObj)

  if (IS_BROWSER) {
    watchEffect(() => {
      head.updateDOM()
    })

    onIonViewDidEnter(() => {
      head.addHeadObjs(headObj)
      head.updateDOM()
    })

    onIonViewWillLeave(() => {
      head.removeHeadObjs(headObj)
      head.updateDOM()
    })
  }
}

Something like this! The onIonViewDidEnter is required for when a user goes back to a page which has been fake-unmounted by ionic. The addHeadObjs can probably be deduplicated but as I said, I haven't tested this!

(vue-meta has the same problem)

🛠️ To reproduce

https://stackblitz.com/edit/github-xdesgf-6vva3r?file=pages%2Ftabs.vue,pages%2Ftabs%2Ftab1.vue,pages%2Ftabs%2Ftab2.vue,pages%2Ftabs%2Ftab3.vue

🌈 Expected behaviour

ℹ️ Additional context

No response

help: Can't make Tabs work

📚 What are you trying to do?

I'm trying to make Tabs work. Here is my setup:

app.vue (as advised from module docs)

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

index.vue is serving as an onboarding page so I moved my app's index to /app/index.vue.

<template>
  <IonPage>
    <IonContent>
      <IonTabs>
        <ion-router-outlet></ion-router-outlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="home" href="/app/home">
            <IonIcon name="home"></IonIcon>
            <IonLabel>Home</IonLabel>
          </IonTabButton>
          <IonTabButton tab="pets" href="/app/pets">
            <IonIcon name="contact"></IonIcon>
            <IonLabel>Pets</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonContent>
  </IonPage>
</template>

<script setup>
const router = useRouter();
router.options.routes = [
  {
    path: "/app",
    redirect: "/app/home",
  },
];
definePageMeta({
  middleware: "auth",
});
</script>

🔍 What have you tried?

I've tried following the docs: here and here, but I couldn't make it work. Whenever I click on the tab, it routes to the actual page.

ℹ️ Additional context

Directory structure:

pages
├──app
│   ├──home.vue
│   ├──index.vue
│   ├──pets.vue
├──index.vue

help: Not working

📚 What are you trying to do?

Get running with OptionsAPI

🔍 What have you tried?

Docs? Yes.
Only in CompositionAPI and Typescript

repo:
R0N1n-dev/nuxtonic

ℹ️ Additional context

No response

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

chore(deps): lock file maintenance

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

chore(deps): update test packages to v0.34.1 (@vitest/coverage-v8, vitest)

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update dependency ionicons to v7.1.2
chore(deps): update capacitor monorepo to v5.2.2 (@capacitor/cli, @capacitor/core)
chore(deps): update dependency @ionic/cli to v7.1.1
chore(deps): update dependency @ionic/vue to v7.2.1
chore(deps): update dependency @ionic/vue-router to v7.2.1
chore(deps): update dependency ufo to v1.2.0
chore(deps): update dependency unimport to v3.1.1

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

actions/checkout v3

actions/setup-node v3

codecov/codecov-action v3

.github/workflows/release.yml

actions/checkout v3

actions/setup-node v3

npm

docs/package.json

@nuxt-themes/docus 1.14.3

@nuxtjs/plausible 0.2.1

nuxt 3.6.5

package.json

@capacitor/cli ^5.0.4

@capacitor/core ^5.0.4

@ionic/cli ^7.0.1

@ionic/vue ^7.0.1

@ionic/vue-router ^7.0.1

@kevinmarrec/nuxt-pwa ^0.17.0

@nuxt/kit ^3.1.0

ionicons ^7.0.0

pathe ^1.1.1

pkg-types ^1.0.3

ufo ^1.1.2

unimport ^3.0.8

@nuxt/module-builder 0.4.0

@nuxt/schema 3.6.5

@nuxt/test-utils 3.6.5

@nuxtjs/eslint-config-typescript 12.0.0

@types/node 20.4.5

@vitest/coverage-v8 0.33.0

bumpp 9.1.1

eslint 8.46.0

eslint-config-prettier 8.9.0

eslint-plugin-prettier 5.0.0

expect-type 0.16.0

husky 8.0.3

lint-staged 13.2.3

nuxt 3.6.5

pinst 3.0.0

playwright 1.36.2

prettier 3.0.0

typescript 5.1.6

vitest 0.33.0

vue 3.3.4

@nuxt/kit 3.6.5

@nuxt/schema 3.6.5

consola ^3.0.0

pnpm 8.6.11

playground/package.json

@capacitor/camera 5.0.6

@capacitor/filesystem 5.0.5

@capacitor/storage 1.2.5

nuxt 3.6.5

Check this box to trigger a request for Renovate to run again on this repository

Confused By What You Mean By Setup For Capacitor?

📚 Is your documentation request related to a problem?

The documentation states that it is ready to go with capacitor, but capacitor is not installed? It was confusing to me and might be confusing to others.

Also I think there is "Capacitor" to run a PWA and "Capacitor" to install on a device which again can be confusing to the reader. I had to to a bit more configure to get the capacitor working and get a sample project installed in my emulator and device.

I was not surprised because I have gone down this road before, but as I stated above, it might not be clear to the average user.

🔍 Where should you find it?

No response

ℹ️ Additional context

No response

fix: NuxtConfig -> Ionic -> Config -> navAnimation doesn't work

🐛 The bug

So according to the docs I should be able to override all ionic navigation animations, but when I do that nothing happens and I still see the default animations.
Seems like navAnimation doesn't work

🛠️ To reproduce

stackblitz.com/edit/github-452wac

🌈 Expected behaviour

I want to be able to override default ionic navigation animations

ℹ️ Additional context

No response

help:

📚 What are you trying to do?

Since 11/08/2022 the nuxt-ionic does not work anymore. (the days before I could start projects without problems)
Has today's nuxt RC7 something to do with it? Is saw that nuxt and nuxt/kit have a different version number in the repo.
A standard nuxt installation RC7 and a antfu/vitesse-nuxt3 RC6 are working without problems.

ON MY LOCAL PC as well as on the PLAYGROUND I get quasi similar Error message.

'FROM THE PLAYGROUND'

ℹ Vite server warmed up in 1407ms 18:51:56
✔ Vite server built in 3783ms 18:52:00
✔ Nitro built in 352 ms nitro 18:52:00
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/projects/yqnikongn.github/node_modules/@stencil/core/internal/app-data' is not supported resolving ES modules imported from /home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs
Did you mean to import @stencil/core/internal/app-data/index.cjs?
at InternalError.get (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:292488)
at defaultResolve (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:622935)
at ESMLoader.resolve (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1210848)
at ESMLoader.getModuleJob (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1208564)
at ESMLoader.import (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1208951)
at importModuleDynamically (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:981760)
at i.importModuleDynamicallyCallback (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:246238)
at _0x69e4ca (https://yqnikongn--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:15:291665)
at $id_0LwZducjkC (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:10145:1)
at instantiateModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53841:9)
at ssrLoadModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53779:25)
at ssrImport (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53804:13)
at $id_PKJWOgL73L (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:7021:37)
at instantiateModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53841:9)
at ssrLoadModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53779:25)
at ssrImport (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53804:13)
at $id_6lIMJNrk8A (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:6526:37)
at instantiateModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53841:9)
at ssrLoadModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53779:25)
at ssrImport (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53804:13)
at $id_6sf4FcQw81 (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:4249:37)
at async instantiateModule (file:///home/projects/yqnikongn.github/.nuxt/dist/server/server.mjs:53841:3) {
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///home/projects/yqnikongn.github/node_modules/@stencil/core/internal/app-data'
}
[nuxt] [request error] [unhandled] [500] [vite dev] Error loading external "@stencil/core/internal/app-data".
at async eval (./.nuxt/dev/index.mjs:117:22)
at async eval (./node_modules/h3/dist/index.mjs:571:19)
at async Server.nodeHandler (./node_modules/h3/dist/index.mjs:517:7)
ℹ Vite client warmed up in 12074ms

🔍 What have you tried?

No response

ℹ️ Additional context

No response

fix: update PWA module

🐛 The bug

This module is still using "@kevinmarrec/nuxt-pwa": "^0.8.0". The latest release for the PWA module is 0.15.0.

🛠️ To reproduce

No reproduction needed.

🌈 Expected behaviour

Fix appleStatusBarStyle in metaOptions of the PWA module.

ℹ️ Additional context

No response

fix: Android app empty screen

🐛 The bug

I was trying to start my project with ionic cap run android -l --external

🛠️ To reproduce

https://stackblitz.com/edit/github-452wac

🌈 Expected behaviour

Instead of empty screen I was expected to see the same content as in web version

On IOS it's fine

ℹ️ Additional context

No response

help: fetching data from hosted nuxt server api's cors issue

📚 What are you trying to do?

I have hosted my nuxt project to vercel so it acts like a backend for my ionic app, to test the api calls I made this

const url = ref('');

const tryInternet = async () => {
    // fetch data from url and return it
    data.value = await useFetch(url.value)
        .then((res) => {
            console.log(res);
            return res.data;
        })
        .catch((e) => 'error: ' + e)
};

// this uses pug, an html preprocessor
.ion-padding
    h1 {{ data }}
    IonInput( v-model="url" placeholder="try" )
    IonButton( expand="block" @click="tryInternet" ) Get

in the server api server/api/count.js:

export default defineEventHandler((event) => {
	return { api: 'works' };
});

using it locally from the same server localhost:3000 works fine:

when I tried hosting it to a backend and retrieving the data from localhost:3000 requesting from the server this comes:

🔍 What have you tried?

I have tried the nuxt-proxy package but the issue was different, I wanted any host to be able to get data from the backend even though I knew this wasn't safe. the issue is that an ionic app doesn't have a web domain to tell the proxy to only send requests to this specific domain. so I didn't know how am I supposed to send to only my app.

ℹ️ Additional context

should I either send a request to only a specific domain somehow? how would I do this with nuxt ionic?
or should I make it accept requests from anywhere? and how can I tell the nuxt server to allow any server's requests?

fix: @nuxtjs/color-mode breaks the project

🐛 The bug

Not sure if this is ionic module problem or color-mode. But when adding @nuxtjs/color-mode to the ionic project it breaks.

  [Vue warn]: inject() can only be used inside setup() or functional components.
  [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'afterEach')
  at eval (./.nuxt/dist/server/server.mjs:2687:36)  
  at fn (./.nuxt/dist/server/server.mjs:454:27)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:68:19)  
  at callWithNuxt (./.nuxt/dist/server/server.mjs:456:23)  
  at applyPlugin (./.nuxt/dist/server/server.mjs:400:29)  
  at Module.applyPlugins (./.nuxt/dist/server/server.mjs:410:11)  
  at async createNuxtAppServer (./.nuxt/dist/server/server.mjs:59:7)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:198:19)  
  at async eval (./.nuxt/dev/index.mjs:533:21)  
  at async eval (./.nuxt/dev/index.mjs:117:22)

### 🛠️ To reproduce

https://stackblitz.com/edit/github-wgn6d9?file=package.json

### 🌈 Expected behaviour

Both packaged works together as I need ability for users to manually change color mode.

### ℹ️ Additional context

_No response_

fix: Can nuxt-ionic be used with @nuxt/content?

🐛 The bug

I'd like to use @nuxt/content to make JSON data files available for generating pages, but it's routing seems to interfere with nuxt-ionic. I tried to disable nuxt-ionic routing via the nuxt.config.js file so I could use the default nuxt routing but that seems to keep all routing from working(?).

🛠️ To reproduce

https://stackblitz.com/edit/github-j5iats?file=nuxt.config.ts,pages%2Ftabs.vue

🌈 Expected behaviour

It would be great if these packages worked together.

ℹ️ Additional context

No response

Wasn't Clear From Documentation How To Setup Page Routing

📚 Is your documentation request related to a problem?

To get page routing to work, I had to remove the app.vue file from the project and to get the index file working I also needed to add the pageMeta inside the Home.vue file

definePageMeta({
  alias: ["/", "/home"],
});

🔍 Where should you find it?

No response

ℹ️ Additional context

No response

fix: Cannot start nuxt: (0 , _nuxt.defineNuxtConfig) is not a function

🐛 The bug

Dev not working.

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/ionic/tree/main/playground

🌈 Expected behaviour

Zero-config, working out of box.

ℹ️ Additional context

No response

fix: not working with Nuxt v3.1.0

🐛 The bug

Getting the following error with the latest version of Nuxt v3.1.0:

[Vue warn]: Component "RouterLink" has already been registered in target app.                                           
[Vue warn]: Component "RouterView" has already been registered in target app.                                                     
[nuxt] [request error] [unhandled] [500] Cannot set property $router of #<Object> which has only a getter                          
  at Object.install (./node_modules/.pnpm/[email protected][email protected]/node_modules/vue-router/dist/vue-router.mjs:3515:49)  
  at Object.use (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4360:28)  
  at ./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/pages/runtime/plugins/router.mjs:45:18  
  at fn (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs:151:27)  
  at Object.callAsync (./node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:49:19)                                   
  at callWithNuxt (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs:153:23)  
  at applyPlugin (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs:97:29)  
  at Module.applyPlugins (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/nuxt.mjs:107:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async createNuxtAppServer (./node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/app/entry.mjs:29:7)

🛠️ To reproduce

https://stackblitz.com/edit/github-ezsh3s

🌈 Expected behaviour

ℹ️ Additional context

No response

help: Access additional Route Information

📚 What are you trying to do?

I need the information from the route to find the active link; since we are not using NuxtLink. I needed to hack into the configuration to get the information and was wondering if there is an easier way?

$nuxt.config.globalProperties.$router?.currentRoute;

🔍 What have you tried?

$nuxt.config.globalProperties.$router?.currentRoute;

This works, but wondering if there is a cleaner way, when I call useIonicRouter it doesn't have the additional route information

ℹ️ Additional context

See example code here
https://stackblitz.com/edit/nuxt-starter-rqvhxt?file=components%2FMainMenu.vue

fix: broken documentation url link

🐛 The bug

500 error when visiting https://ionic.nuxtjs.org/

🛠️ To reproduce

https://ionic.nuxtjs.org/

🌈 Expected behaviour

url is broken

ℹ️ Additional context

No response

docs: more clear and precise steps to get started using ios and android

📚 Is your documentation request related to a problem?

A set of instructions to get a Nuxt project to work with Ionic along with ios or android.

`
npx @ionic/cli integrations enable capacitor
npx cap add ios
npx cap add android

Following the above approach, while following along with the capacitor docs, it isn't clear on the capacitor or nuxt documention pages that represent step-by-step instructions on how to get a Ionic ios or android project running with Nuxt.

Here are the exact steps I followed to get a working project running:

`
ionic init

npx @ionic/cli integrations enable capacitor

npm i @capacitor/ios

npx cap add ios
`

In package.json within the script tag, add:

"ionic:build": "npm run generate"

Then you must build the project with:

npm run build

Then a pages/index.vue file needs to be present which is mentioned in the Nuxt Ionic module docs.

i looked at this repo: https://github.com/danielroe/nuxt-ionic/tree/main/playground

however, there's no working example with a ios or android folder. for ios, when running the following the below error is thrown:

npx cap open ios npx cap run ios

🔍 Where should you find it?

Nuxt 3 Module Instructions: https://ionic.nuxtjs.org/getting-started/

ℹ️ Additional context

ionic ios docs: https://capacitorjs.com/docs/ios

Also, when using the ionic vs code extension and try to build or sync the app these errors appear:

fix: useIonRouter() cannot be used in middleware

🐛 The bug

I tried using useIonRouter() for the forward animation, but it doesn't work. Shows an error instead:

[Vue Router warn]: uncaught error during route navigation:
TypeError: Cannot destructure property 'canGoBack' of 'inject(...)' as it is undefined.

🛠️ To reproduce

https://stackblitz.com/edit/github-c5k7xk?file=composables%2FuseUser.ts,pages%2Ftabs%2Ftab1.vue,pages%2Ftabs%2Ftab3.vue,middleware%2Fauth.ts

🌈 Expected behaviour

Clicking login button in Tab 1 should navigate to Tab 3. Clicking on Tab 3 doesn't work too.

ℹ️ Additional context

No response

fix: getActivePinia was called with no active Pinia within global middleware

🐛 The bug

Thanks for the recent middleware support.
Unfortunately when using pinia within middleware files with the .global suffix the following error is being raised:
[Vue Router warn]: Unexpected error when starting the router: Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.

This does not occur in middleware without the .global suffix. So I can workaround this by defining which middleware to use on every page.
The issue doesn't occur in a nuxt project without nuxt-ionic.

🛠️ To reproduce

https://stackblitz.com/edit/github-ezppn4?file=package.json

🌈 Expected behaviour

Pinia is called successfully similar to calls to non-global middleware.

ℹ️ Additional context

An example of a nuxt global middleware without nuxt-ionic which does work:
https://stackblitz.com/edit/github-me1qn4?file=package.json

Cannot start nuxt issue when trying to start playground

📚 What are you trying to do?

After following the steps in the project's README, I ran pnpm dev and got the following error:

 ERROR  Cannot start nuxt:  Cannot find module '/home/aleksa/Desktop/Projects/nuxt-ionic/dist/module.cjs'

  at createEsmNotFoundErr (node:internal/modules/cjs/loader:954:15)
  at finalizeEsmResolution (node:internal/modules/cjs/loader:947:15)
  at trySelf (node:internal/modules/cjs/loader:458:12)
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:910:24)
  at Function.resolve (node:internal/modules/cjs/helpers:108:19)
  at Function._resolve [as resolve] (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:108226)
  at resolveModule (node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:242:29)
  at normalizeModule (node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:412:18)
  at installModule (node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:397:47)
  at initNuxt (node_modules/.pnpm/[email protected]/node_modules/nuxt/dist/index.mjs:1334:13)

🔍 What have you tried?

I tried deleting lock file and node_modules and installing deps again, but even after reinstalling I get the same error

ℹ️ Additional context

No response

feat: support for ionic v6.2

🆒 Your use case

Updating to this version would allow for datetime multiple entry selection, datetime wheel picker, improvements for bottom sheets and more

🆕 The solution you'd like

Recently Ionic v6.2 has been announced, and it would be great to add module support for it

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: packageRules[3]: Each packageRule must contain at least one match* or exclude* selector. Rule: {"groupName":"docs","includePaths":["docs/**"]}

help: Tailwind CSS not recompiling

📚 What are you trying to do?

Use the @nuxtjs/tailwindcss module along with nuxt-ionic.

The dev server will recognize that the vue file has changed and reload the browser, but the css that get injected does not get replaced. It does however get replaced if I do one of the following.

Restart the dev server
Disable the nuxt-ionic module

🔍 What have you tried?

No response

ℹ️ Additional context

No response

feat: Add interface for accessing icons with Ionic

🆒 Your use case

When using icons while creating an app, what you usually do is with ion-icon you specify your icons like this:

<ion-icons name="home" />

or if you would like a little more type-safety for example:

import { home, homeSharp } from 'ionicons/icons'

// Just one icon
<ion-icons :name="home" />
// Or to specify for different platforms
<ion-icons :md="home" :ios="homeSharp" />

🆕 The solution you'd like

I think it would be great if nuxt-ionic could expose unified interface from which we could access all icons in typesafe way

🔍 Alternatives you've considered

Let's say interface Ionicon is auto-imported, then my proposition would look something like this

<ion-icons :md="Ionicon.home.regular" :ios="Ionicon.home.sharp" />

This seems a bit more verbose than previous type-safe solution, but requires less boilerplate and less looking up certain strings on the official website

ℹ️ Additional info

No response

danielroe / nuxt-ionic Goto Github PK

nuxt-ionic's Introduction

Nuxt Ionic

Features

Usage

💻 Development

License

nuxt-ionic's People

Contributors

Stargazers

Watchers

Forkers

nuxt-ionic's Issues

📚 Is your documentation request related to a problem?

🔍 Where should you find it?

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

🐛 The bug

app.vue:

components/Ui/Tabs.vue:

pages/tabs/Home.vue

pages/tabs/Schedule.vue

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

📚 Is your documentation request related to a problem?

🔍 Where should you find it?

ℹ️ Additional context

🆒 Your use case

🆕 The solution you'd like

🔍 Alternatives you've considered

ℹ️ Additional info

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

📚 Is your documentation request related to a problem?

🔍 Where should you find it?

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

📚 Is your documentation request related to a problem?

🔍 Where should you find it?

ℹ️ Additional context

📚 What are you trying to do?

🔍 What have you tried?

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

📚 What are you trying to do?

🔍 What have you tried?

ℹ️ Additional context

📚 Is your documentation request related to a problem?

🔍 Where should you find it?

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

📚 What are you trying to do?

🔍 What have you tried?

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour

ℹ️ Additional context

🐛 The bug

🛠️ To reproduce

🌈 Expected behaviour