search

TYPO3-Headless / nuxt-typo3

TYPO3 Frontend rendered in Vue.js and Nuxt (frontend for EXT:headless)
https://t3headless.macopedia.io/nuxt-typo3/
90 stars 35 forks source link

Nuxt3 compatibility #282

Closed MichaelNussbaumerGOWEST closed 11 months ago

MichaelNussbaumerGOWEST commented 1 year ago

Is it already in planning? As we are nearing the Nuxt v3 release, this should might get on the schedule.

mercs600 commented 1 year ago

@MichaelNussbaumerGOWEST yes it is. We are working on the next version for nuxt3. We can share our alpha version soon. Last time I also checked that nuxt-bridge is working correctly with current version of nuxt-typo3.

keoz-did commented 1 year ago

@mercs600 did you plan to upgrade from vuex to Pinia?

mercs600 commented 1 year ago

@keoz-did we don't want to use any store as default, because it's enough to use useState composable from Nuxt https://nuxt.com/docs/getting-started/state-management. But the new version will be as much as possible customizable, so you are will be able to use pinia if you want 😄

keoz-did commented 1 year ago

Ok that sounds great. Is it possible to chat without directly on slack or something like that? Cause we have some specific questions :)

Von: Adam @.> Gesendet: Freitag, 2. Dezember 2022 12:58 An: TYPO3-Headless/nuxt-typo3 @.> Cc: Dirk Daneyko @.>; Mention @.> Betreff: Re: [TYPO3-Headless/nuxt-typo3] Nuxt3 compatibility (Issue #282)

@keoz-didhttps://github.com/keoz-did we don't want to use any store as default, because it's enough to use useState composable from Nuxt https://nuxt.com/docs/getting-started/state-management. But the new version will be as much as possible customizable, so you are will be able to use pinia if you want 😄

— Reply to this email directly, view it on GitHubhttps://github.com/TYPO3-Headless/nuxt-typo3/issues/282#issuecomment-1335134235, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXENLJO2IN4FWLVYTWKQ3MTWLHP6JANCNFSM6AAAAAAR6DGSFM. You are receiving this because you were mentioned.Message ID: @.***>

mercs600 commented 1 year ago

@keoz-did sure, you can contact us directly on https://macopedia.com/contact or send PM on slack typo3.slack.com

tmotyl commented 1 year ago

Hi, We have good news. We've already developed a new version of nuxt-typo3 build on top of vue.js 3.0 and nuxt 3. It is available to early adopters through Early Access Program. If you're interested, drop me an email at t.motylewski[at]macopedia.com or on TYPO3 Slack.

mercs600 commented 1 year ago

sneak peak: our new documentation draft, still in progress, but you can see the api https://t3headless.macopedia.io/nuxt-typo3

marcoluig commented 1 year ago

Hi @mercs600 , as I already wrote to you in TYPO3 Slack, we are currently testing the alpha release of version 2. We are using the package with TYPO3 v11 in a DDEV environment.

The project setup is as follows:

There are a few things to keep in mind when using the package in DDEV, as there are problems with the websocket connection and SSL certification from within the container.

To solve the problems we have the following solutions:

tobiasquadflieg commented 1 year ago

Hey, for everybody that have a hard time to get an smooth development experience, with nuxt3 in ddev/nginx here is some configuration, that works great, hope this saves a few headaches ;)

Nginx config

# Support for WebP
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

# Development Server config
server {
    listen 80;
    listen 443 ssl http2;
    server_name app.ddev.site;

    ### Cache Settings for even faster local development
    # gzip on;
    # gzip_disable "msie6";
    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_min_length 256;

    # gzip_types
    # application/atom+xml
    # application/geo+json
    # application/javascript
    # application/x-javascript
    # application/json
    # application/ld+json
    # application/manifest+json
    # application/rdf+xml
    # application/rss+xml
    # application/xhtml+xml
    # application/xml
    # font/eot
    # font/otf
    # font/ttf
    # image/svg+xml
    # text/css
    # text/javascript
    # text/plain
    # text/xml;

    ssl_certificate /etc/ssl/certs/master.crt;
    ssl_certificate_key /etc/ssl/certs/master.key;

    include /etc/nginx/monitoring.conf;

    rewrite ^/(.*) /$1 break;

    # NUXTJS Frontend URL rewriting support
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
        proxy_buffering on;
        proxy_cache_valid   200 1d;
        proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;

        proxy_pass http://localhost:3000;
        proxy_read_timeout  1m;
        proxy_connect_timeout 1m;
    }

    location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    include /mnt/ddev_config/nginx/*.conf;
}

nuxt.config.ts

export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                protocol: "wss",
                clientPort: 443,
                path: "hmr/",
            }
        }
    }
})

docker.compose.ports.yaml

version: "3.6"
services:
  web:
    ports:
      - 24678:24678
felixranesberger commented 1 year ago

"We've already developed a new version of nuxt-typo3 build on top of vue.js 3.0 and nuxt 3. It is available to early adopters through Early Access Program."

Do you know, when the Nuxt 3 support will be released for the public?

Zielgestalt commented 1 year ago

Any news?

tmotyl commented 1 year ago

Hi @Zielgestalt @felixranesberger The initial plan was to release the EAP version end of June.

However recent minor/patch releases of vue brought some changes which are "breaking" for Nuxt. e.g. nuxt shipped some workarounds for bugs or missing features in vue 3.0, and now vue is fixing them but not in the same way nuxt has handled it..... So there are still many moving puzzles.

Long story short, we are forced to update/refactor nuxt-typo3 codebase once again, to be compatible with the newest vue/nuxt versions. In the process, we also discover bugs in vue/nuxt, report them back, and help fix them. For example, last Friday we bought consulting session with Nuxt Core Team showcasing the bug which blocks nuxt-typo3 and our proposal on how to fix it (to speed up the fixing process, so you all can benefit from it).

I will discuss with the team how to approach the situation. One way I'm considering is releasing a nuxt-typo3 version which is based already on vue 3 (but not the newest version of vue/nuxt - before the breaking changes mess), and keep EAP for the newer releases.

Getting a few more companies to join EAP program would definitely help release the version sooner. So please consider joining EAP -> https://t3headless.macopedia.io/nuxt-typo3/join-eap

If you have any questions of would like to see whats inside EAP version, just drop me a line on TYPO3 Slack.

tmotyl commented 1 year ago

FYI, The EAP version is compatible with Vue 3.3 now.

bernhardberger commented 1 year ago

Well, the vue3/nuxt3 version being behind a paywall just killed our aspirations to try and tackle a headless TYPO3 project just for the fun of it.

Should have read the fine print more closely before suggesting this to my team. Can't start a new project based on vue2 that's almost EOL.

felixranesberger commented 1 year ago

"Can't start a new project based on vue2 that's almost EOL."

I think you could probably still use Vue3 to some extend using Nuxt Bridge. But I'm not sure on how much benefit this actually would bring to your codebase, since you're mixing Vue2 and Vue3, which could cause some headaches in the future.

"Well, the vue3/nuxt3 version being behind a paywall just killed our aspirations to try and tackle a headless TYPO3 project just for the fun of it."

Open source doesn't mean its free and projects face issues, when trying to receive funding for their work. Rewriting large parts of the code is certainly not a cheap task. EAP is a way to try and receive some funding to cover parts of the cost of maintaining and adding new features. If its the right way for the TYPO3 Headless community, time will tell.

My colleague wrote about this exact issue on his blog and I like the way that Statamic handles it.

https://flanger.dev/blog/post/my-take-on-a-new-approach-to-typo3-extension-funding

bernhardberger commented 1 year ago

"Can't start a new project based on vue2 that's almost EOL."

I think you could probably still use Vue3 to some extend using Nuxt Bridge. But I'm not sure on how much benefit this actually would bring to your codebase, since you're mixing Vue2 and Vue3, which could cause some headaches in the future.

"Well, the vue3/nuxt3 version being behind a paywall just killed our aspirations to try and tackle a headless TYPO3 project just for the fun of it."

Open source doesn't mean its free and projects face issues, when trying to receive funding for their work. Rewriting large parts of the code is certainly not a cheap task. EAP is a way to try and receive some funding to cover parts of the cost of maintaining and adding new features. If its the right way for the TYPO3 Headless community, time will tell.

My colleague wrote about this exact issue on his blog and I like the way that Statamic handles it.

https://flanger.dev/blog/post/my-take-on-a-new-approach-to-typo3-extension-funding

I am sorry, that was my frustration speaking after spending a good amount of time reading through the docs and finding out about the cost too late in the process.

I'm not criticizing that it's behind a paywall (I get that). I'm criticizing that it wasn't obvious enough: https://t3headless.macopedia.io/nuxt-typo3/

There's no information at all when navigating there from GitHub that the EAP is behind a paywall. Just a big bold "Getting started" button with a tiny little "Join EAP" (no info about associated cost at the screen).

tmotyl commented 1 year ago

@bernhardberger on the page you mentioned, there is:

"This documentation is for nuxt-typo3 v2.0, which is available through the Early Access Program (EAP)." and "For the older version of nuxt-typo3 (compatible with Vue 2), it's available for free from nuxt-typo3 GitHub." just above the "get started" button.

It's pretty obvious to me, and there is no "fine print". But please let me know if you have an idea of how to improve the copy. I'm happy to make it clearer.

Here is my perspective:

  1. how do you think comments like this make me and other open-source contributors feel? Does it improve my motivation to work on open-source projects or kill it? I personally give away for free tens of hours every month for over 10 years to open source. My company gives away thousands of hours of open-source work every year. I don't think it's fair that you pour your frustration here. You're welcome to contribute and give merit feedback about what needs to be improved, but please keep the appropriate form. And please also share positive feedback and appreciation when you use something open-source.

  2. Do you consider the price for EAP too high? From what EAP users are telling us, the value you get is >20x. Not counting the costs of further maintenance. There are agencies who built their own frontend for Ext: headless in react or angular, so this is also possible, you don't have to use nuxt-typo3 to use headless.

if it helps you with doing due-diligence and getting your team on board with technology, just drop me a line on Slack and we can do a short call showing you what's in the new nuxt-typo3 and answer any questions around.

bernhardberger commented 1 year ago

  1. I believe in OpenSource (free or not) and am a FOSS contributor myself, as are members on my team. Being around the TYPO3 community for almost 2 decades the shift away from FOSS philosophy in recent years is quite noticable and whilst I absolutely do not condemn it it does start to get me into situations where I have to start arguing about continuing to use TYPO3 more and more often. The "ecosystem" being free and open source imho was/is a main driving factor in the TYPO3 world. Personally I didn't expect it in this particular instance and was caught off-guard, knowing there's likely no way I can sell this to the upstairs and building on top of vue2 wouldn't be an option either.

  2. This is honestly very difficult to answer:

Personally, looking at it from a business perspective making money off it it's actually great value and more than just fair. The problem isn't selling the value to the devs (we totally get it and see it), it's selling it to the people who make the actual decisions of spending that money.

They see XXX€ and their counter argument is something along the lines "can't we just use WordPress/Statamic/XYZ. We can get years worth of licenses for that money" or even worse "let's wait until it's released and free" (which more often than not just isn't an option due to deadlines).

Right now what one could try to sell "upstairs" is: "it looks like it could potentially save us XXX$ in development. But you'll have to make the investment to find out". Chances of that happening: unfortunately slim to none.

If I were in a position to just invest that money I'd do it in a heartbeat as I know the value. Reality is: I'm not and it's crippling my options. People want "headless", no matter if it makes sense or not in a given context, they just want it and I can't provide it (and solely maintain a solution with a very small team). So my options end up either building on top of a platform (Vue2) that's basically EOL by the time the project gets finished or to stay away from TYPO3 because I can't provide the resources to build from scratch and maintain our own solution (and I actually also don't want to segment the "market"). As I said, I believe in OpenSource and collaboration. No need to reinvent the wheel imho. Use what's there and build on top of it.

All that said: it's hard to come up with a different model. Many people/companies don't sponsor if they don't need to. You have to make them pay of you want to provide resources as a company to build and maintain. I'm guessing that figure isn't just a random number but it's what you need to continue development and as said: I think it's fair value.

The one thing I find a bit problematic is that there's no access at all without spending the fill amount. Not even a less feature-rich "free" version to get the ball rolling, get devs to play with it, to sell the "pro" version to higher ups because you can show and prove it works and is a benefit and argue that you're already familiar with the framework and vouch for it. It's all-or-nothing upfront. And it's not a sum I'd be able to fund privately out of my own picket.

Again, I'm sorry - I really don't want to sound that negative about it, but that's the situation and reality some of us are caught in and I appreciate the conversation. I really do!

But honestly this isn't the right place for it so I'd like to leave it with that and maybe continue this in another setting as suggested.

tmotyl commented 1 year ago

No offense taken. If the problem is to convince decision-makers - this is what we are here for. We do presentations about headless and how agencies are benefiting from it all the time, and also at many camps and conferences. I will reach out to you on Slack about this.

And one more thing to clarify. We're not earning money on EAP. It's just making the costs of development slightly smaller, and making it possible to open-source it at the end.

develth commented 1 year ago

Hello! Is there any news on that?

infabo commented 1 year ago

I will reach out to you on Slack about this.

is the slack channel on ext:headless still active at all?

tmotyl commented 1 year ago

Still active and growing. Please be considerate that it's not an SLA-backed support channel. People help each other on a voluntary basis. Would you like SLA support? Don't hesitate to get in touch with me ;)

About the v3 compatibility (publishing EAP version), Vue.js API is stable now. We're working on publishing it - figuring out some details. I believe it will happen in 4-6 weeks.

infabo commented 1 year ago

Dear tmotyl,

Thank you very much for extending the offer of SLA-backed support. I truly appreciate your willingness to provide assistance in this manner. However, at this time, I believe I'll be able to manage with the community-driven support available on the ext:headless Slack channel.

The collaborative spirit within the community has been invaluable, and I'm eager to continue contributing and learning from others. Your understanding in this matter is greatly appreciated.

Thank you once again for your offer and for being a crucial part of this supportive ecosystem.

Warm regards, infabo

mercs600 commented 11 months ago

We have released the new version of nuxt-typo3. Happy coding, guys!