📚 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

📚 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

My first try at implementing PWA Elements, currently doesn't work Since original capacitor documentation doesn't mention anything about Vue specifically, I figured it might be just the matter about executing defineCustomElements(window) once vue app is ready, for which I chose client plugin.

However I'm plagued by errors, as seen in the image below. Tried to debug them, but after trying can't figure out what might be wrong. Before this I also tried registering setupCustomComponents function with code similar to this plugin as a callback to certain hook, however I couldn't find suitable one from the list that executes at the time where window is defined. @danielroe some of your input would be greatly appreciated 👍🏽

📚 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

📚 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) {
  /*
   * -------------------------------------------
   */
...

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | @​docus/docs-theme | 3.0.0-1138f93 -> 3.0.0-b99961f | | | | | devDependencies | patch | | @​docus/github | 1.2.6-1138f93 -> 1.2.6-b99961f | | | | | devDependencies | patch | | eslint (source) | ^8.21.0 -> ^8.22.0 | | | | | devDependencies | minor | | node | 16.15.1 -> 16.16.0 | | | | | volta | minor | | nuxt | ^3.0.0-rc.6 -> ^3.0.0-rc.8 | | | | | devDependencies | patch | | pnpm (source) | 7.5.0 -> 7.9.0 | | | | | packageManager | minor |

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Renovate will not automatically rebase this PR, because other commits have been found.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

• [ ] If you want to rebase/retry this PR, click this checkbox. ⚠ Warning: custom changes will be lost.

This PR has been generated by Mend Renovate. View repository job log here.

🐛 The bug

middleware is not being called

🛠️ To reproduce

1. go to tab 3
2. click the button
3. 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

This PR contains the following updates:

| Package | Type | Update | Change | |---|---|---|---| | node | volta | rollback | 16.15.1 -> 16.15.0 |

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by Mend Renovate. View repository job log here.

📚 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

🆒 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 😄

📚 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

🐛 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

Closes #192

As documented in https://nuxt.com/docs/guide/directory-structure/nuxt.config, defineNuxtConfig is now auto imported. We'll either have to remove import (which this PR opts to do) or import it from nuxt/config instead.

🐛 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

🐛 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

🐛 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

This PR contains the following updates:

| Package | Type | Update | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---|---|---| | @​nuxt/module-builder | devDependencies | pin | ^0.2.0 -> 0.2.1 | | | | | | @nuxt/schema | devDependencies | patch | 3.0.0-rc.12 -> 3.0.0 | | | | | | @nuxt/test-utils | devDependencies | patch | 3.0.0-rc.12 -> 3.0.0 | | | | | | nuxt | devDependencies | pin | ^3.0.0-rc.12 -> 3.0.0 | | | | |

Add the preset :preserveSemverRanges to your config if you don't want to pin your dependencies.

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.