Discussion on Pinx - Vuejs / Nuxt Tailwind + Naive Admin Dashboard Template

Discussion on Pinx - Vuejs / Nuxt Tailwind + Naive Admin Dashboard Template

Cart 416 sales
Recently Updated
Well Documented

DverseStudio supports this item

Supported

25 comments found.

dz9c92

dz9c92 Purchased

Hello, I purchased this template a few months ago and finally had time to review the code. I was surprised to see a non-standard architecture that seems to fight against Nuxt conventions—specifically the use of a custom app-layouts directory with manual imports in app.vue rather than the native layouts/ system. As someone learning Nuxt, this makes it difficult to follow official documentation since the template relies on manual wiring for features that should be automatic. Are there plans to refactor this to align with standard Nuxt architecture in future updates? I suppose I’ll do the refactor myself as it’s trivial enough, just an observation.

dz9c92

dz9c92 Purchased

To be fair, you do mention all of this in the docs, just curious about the deviation from Nuxt.

Hey dz9c92, thanks for the feedback. The choice to use the app-layout directory comes from the need to create a parent layout that globally manages the main elements of the template like the sidebar and header. From there, developers can use Nuxt’s native layouts to handle variations of the pages displayed inside the main layout. It also happens to mirror how things are structured in the pure Vue version, although that part is not particularly relevant. I’ll definitely keep your feedback in mind and really appreciate you sharing it. It gives us something to think about, and we’ll try to align the architecture with Nuxt standards as much as possible.

dz9c92

dz9c92 Purchased

Thank you very much for the explanation, and so quickly. It makes sense and honestly, it’s not a big deal at all to anyone who may be reading this and wanting to purchase!

Any ETA on Nuxt 4.1 support?

Hi iDavidDeSmet, we plan to release the updated version of Pinx, with all dependencies updated and compatibility with Nuxt 4.1, by mid-October

Hey, everybody. Firstly, I’d like to say what a very cool job, as soon as I saw it I immediately said “This is the one”. The sad thing is that there is no support for Laravel monolith with InertiaJS out of the box, but based on this question, can you help with this? Second question – neither of the two links gives you the option to create a ticket about Git Access at the very least. Requires authorisation: https://dversestudio.freshdesk.com/support/tickets/new, https://dverse.freshdesk.com/support/tickets/new)

Thanks!

Hi RoffDaniel, we’re glad you’re enjoying Pinx and thank you for the feedback! We had to change our ticketing platform, which is now available at this link: https://dversestudio.tawk.help/

Feel free to reach out, we’ll be happy to grant you GitLab access and provide support

We have restored the previous ticketing system, so you can now submit your requests from here: https://dversestudio.freshdesk.com/support/tickets/new

It’s good, but the page is very slow to load and sometimes it doesn’t open at all, I have to close it and open it again. What is the reason for this? I can’t figure it out. Sometimes it just seems to be loading. But it doesn’t load, sometimes the page loads.

Hi klibidzidibiki, thank you for the feedback. This could depend on various factors, including implementation-related ones or third-party services. For better technical support, we suggest using this channel:

https://dversestudio.freshdesk.com/support/tickets/new

I finally tracked down the issue that sometimes caused the app to not load: the isMobile() function was entering an infinite loop.

The fix I implemented in @utils/index.ts looks like this:

// A composable that returns whether the device is mobile as a reactive value export function isMobile() { const mobile = ref(false) }

onMounted(() => {
  const { $device } = useNuxtApp()
  mobile.value = ($device as any).isMobile
})
return mobile

Then in pages/Apps/Kanban.vue, pass it to the TaskCard component like this:

<script setup lang=”ts”> import { useIsMobile } from ’@/utils’ const mobile = isMobile() </script>

<template> <TaskCard :mobile=”mobile” /> </template>

This approach ensures that:

isMobile is reactive, so the template updates automatically. You don’t need to call the function repeatedly, preventing infinite loops.

Hi klibidzidibiki, thank you so much for your feedback, it will be very helpful

Hi please i have this error, nuxt unhandled Cannot find module ’./isArray’

Hi, I’m happy to assist you with your issue! The best way to receive support is by using this dedicated channel: https://dverse.freshdesk.com/support/tickets/new.

Through this platform, we can provide you with more detailed and efficient support. Please submit your ticket there, and we’ll get back to you as soon as possible.

Thanks

Sorry, I accidentally added a dot at the end of the link. Here is the correct link: https://dverse.freshdesk.com/support/tickets/new

Demo is mind blowing and you guys have focused on each small interactions, For backend most of the people use Laravel,

I have seen year old comment from you guys that you don’t have any plans for Laravel version,

but there is Inertia.js 2.0 coming soon and Inertia.js is glue to laravel where you don’t need to write API or anythig,

if you could release such version with that you can cater bigger laravel market. or just invest in providing documentation for laravel with Inertia.js

Also Laravel raised $57 million Series A from Accel and they are using Inertia.js for that core product which is Laravel cloud for which they raised this funding,

so Inertia.js will be here to stay forever not a random js library it’s maintained by Laravel core team.

My warm regards to the whole team at DverseStudio.

Thank you so much for your message and for sharing such interesting thoughts with us!

We’re truly delighted that you enjoyed the demo and deeply appreciate that you noticed the attention to detail in the interactions—it’s something we value greatly.

What you highlighted about Laravel and Inertia.js is a fantastic point of reflection. We are well aware of the great potential of this combination, and the fact that Laravel has taken such a significant step with the support of Inertia.js makes this perspective even more compelling.

We will carefully consider this opportunity, and your suggestion to invest in dedicated documentation is something we will seriously take into account as well.

Thank you again for your support and for taking the time to share your feedback. Your insights are truly valuable to us!

Warm regards from the entire team at D*VERSE Studio.

Whether keep alive is supported to save the status of the open page?

We are working on implementing it. Currently, it is possible to use it in the Vue version by carefully modifying the key property of the <RouterView> component as follows:

:key=”(route?.name?.toString() || ’’) + forceRefresh”

Thanks,Waiting for you

Hello jiadz, we have uploaded the latest update of Pinx with keep-alive support. You can also test the demo by trying, for example: 1. Modify the value of the input field on this page: https://pinx.vercel.app/components/autocomplete 2. Change the page 3. Return to the page https://pinx.vercel.app/components/autocomplete

And you will find the previously entered value.

Best regards

I would like to update the “now” section in date pickers to be in Turkish. How can I do this?

www.naiveui.com/en-US/os-theme/components/time-picker

Hi inatbir, thank you for contacting us.

To update the language of the components, simply modify the file /app-layouts/common/Provider.vue by adding the following properties to the n-config-provider component: <n-config-provider :locale=”trTR” :date-locale=”dateTrTR” > <!- other component code -> </n-config-provider>

Inside the <script> tag, you need to import dateTrTR and trTR as follows: import { dateTrTR, trTR } from “naive-ui”

For better technical support, you can submit a ticket on our platform: https://dverse.freshdesk.com/support/tickets/new Additionally, from this platform, you can request lifetime access to the Pinx repository.

We remain at your disposal.

In the next update, the Provider component will be available with internationalization connected through vue-i18n

i got problem with pinx-nuxt-full-version after running: yarn install yarn run dev

ERROR [unhandledRejection] Failed to resolve entry for package “jsvectormap”. The package may have incorrect main/module/exports specified in its package.json

Hi diansoulzzz, thank you for contacting us. To solve this issue, you just need to fix the version of jsvectormap to “~1.5.3”. For better technical support, you can submit a ticket on our platform: https://dverse.freshdesk.com/support/tickets/new

Additionally, from this platform, you can request lifetime access to the Pinx repository.

We remain at your disposal.

i already my package.json set “dependencies”: { “jsvectormap”: “~1.5.3”, ... }

rm node_modules rm yarn.lock yarn cache clean yarn install yarn dev

problem still ocurrs

If you install the packages via yarn, you can try adding the resolutions property inside package.json:

“resolutions”: { “jsvectormap”: “~1.5.3” },

For technical support, it is preferable to use support emails or our ticketing platform (https://dverse.freshdesk.com/support/tickets/new) so that we can provide better assistance, as everything gets flattened in the comments and it’s not possible to share any files.

We remain at your disposal.

Anyone else get this error building? I haven’t received a response form my support yet: Missing ”./dist/types/stencil-public-runtime.d” specifier in ”@revolist/revogrid” package

Hi Vinniyo. We responded to your support email about 7 hours ago. If you want, we can continue the conversation there to try to resolve the issue. If you prefer, you can also create a ticket here [https://dverse.freshdesk.com/support/tickets/new] and continue the discussion on the support platform.

We remain at your disposal.

Got it! Thanks. I’ll follow up by email.

I want to buy But I want to support RTL?

 Hi hamdyoof, thanks for your interest. Currently, it is not available, but the RTL implementation is on our roadmap, although I don’t know the release date

Hi hamdyoof, Pinx’s latest update includes beta RTL support

Hello, I like your template, but can you tell what time RTL will be available. Thanks

Hi alquhait, we’re glad you like Pinx. RTL is on the roadmap; we’re waiting to achieve a consistent set of RTL-compatible components before releasing an update

Hi alquhait, Pinx’s latest update includes beta RTL support

Are you planning on releasing a React version in the future?

We’re sorry but we currently have no plans to release a React version

I want to buy the template. Can i ask what nuxt and tailwind version use?

Hi imbomabrur0906, thanks for your interest.

The versions are: nuxt v3.10.0 tailwindcss v3.4.1

Thank you for your great work! I have a question how i can change the path of index.html which has the #app?

Hi Notsaied, We are glad you like Pinx.

To change the path of index.html, you need to implement some changes in vite.config.ts.

If you want, you could send us a support request email; in this way, it will be easier to share the code with you.

We remain at your disposal.

Thanks, I have done it, Just hope you add RTL!

Hi Notsaied, Pinx’s latest update includes beta RTL support

Hello this is great template for my project, can you add a guide to upgrade the theme, I’m using it since 1.4.0 and I’m not sure which files/code should I copy and paste from 1.6 to make the upgrade

Hi icemandks, we are glad you like Pinx. Thank you for the feedback. In the meantime, you can contact us through a support email, and we will be happy to assist you

To remove this app notification?

onMounted(() => {
    if (window.innerWidth > 700 && list?.value[0] && list?.value[0].id !== 9999) {
        setTimeout(() => {
            const newItem: Notification = {
                id: 9999,
                category: "news",
                type: "success",
                title: "Good news",
                description: "HI! You can buy this template on Themeforest, click here.",
                read: false,
                date: "Today",
                action: () => {
                    window.open("https://themeforest.net/item/pinx-vuejs-admin-template/47799543", "_blank")
                },
                actionTitle: "Go to Themeforest" 
            }

            useNotifications().prepend(newItem, { autoNotify: true })
        }, 10000)
    }
})

Excellent theme.

We’re pleased that you appreciate Pinx! This is just a demo notification, and you can remove this code. Moreover, you can utilize the composable ‘useNotifications()’ throughout the entire template to display notifications.

For technical support, we recommend reaching out through the following channels:

- ThemeForest Support: https://themeforest.net/item/pinx-vuejs-admin-template/47799543/support

- Our Ticket Platform: https://dverse.freshdesk.com/support/tickets/new

Feel free to contact us if you need any assistance or have further questions.

Please tell me how to integrate this into Laravel 10 and set up compilation in vite? I really liked the theme and want to deploy an application with it in Laravel. Probably the most important thing is the combination of VueJS and Laravel routes.

I’m still hesitating to buy.

P.S. Are there any plans to add a template with registration, for example, of an application step by step?

Hello sequelone,

We’re glad you like our template. Unfortunately, at the moment, we don’t have a Laravel version. However, you can consider Pinx as a standalone product that you can connect via API to any backend, whether it’s Laravel, Node, Python, etc.

Regarding registration, Pinx already has an integrated registration page that you can see in the demo by logging out. If you meant something else about registration, please let us know; we’re here to help.

Hi, this theme is great. But dark mode switcher and menu collapsing is a little bit laggy. Hope this problem will get fixed soon.

Hi thuaan95, we are glad that appreciate Pinx, yes of course, this two animations and the whole template will be improved soon.

how to use the figma file? i allready import and export the figma token. what next step? do i provided with .figma file?

You can find it inside the zip file you downloaded from the marketplace.

Okay, got it. Does the Figma file only provide a basic design, rather than a complete template like the Vue.js template?

In the figma file you can find the design system, the basic layout and the common components that you can use to compose interfaces before moving on to development. During the updates, additional components will also be added to the figma file

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey