diff --git a/CHANGELOG.md b/CHANGELOG.md index 20a402b..9223a36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,19 +1,30 @@ # Changelog +## Version 1.4.1 + +- Refactor some components and explicitly split out client only components +- Fix bug in the notifications +- Update readme to indicate sister project in react/next + ## Version 1.4.0 + - Cookie Consent -```npm i vanilla-cookieconsent``` + `npm i vanilla-cookieconsent` ## Version 1.3.0 + - Add an example of usage limits (Notes AI Gen). - Includes non-destructive schema changes -```npx prisma db push``` + `npx prisma db push` ## Version 1.2.0 + - 'Lift' auth context into server middleware to support authenticated api (rest) endpoints for alternate clients while still supporting fully typed Trpc context. ## Version 1.1.0 + - Upgrade Prisma to version 5 to improve performance (https://www.prisma.io/docs/guides/upgrade-guides/upgrading-versions/upgrading-to-prisma-5) + ``` npm install @prisma/client@5 npm install -D prisma@5 @@ -21,17 +32,21 @@ npx prisma generate ``` - Upgrade Nuxt to 3.7.0 + ``` npx nuxi upgrade --force ``` ## Version 1.0.0 -First Release version. If your package.json does not have a version attribute, this is the version you have. + +First Release version. If your package.json does not have a version attribute, this is the version you have. ## Project Creation (for interest only) -This is what I did to create the project including all the extra fiddly stuff. Putting this here so I don't forget. + +This is what I did to create the project including all the extra fiddly stuff. Putting this here so I don't forget. ### Setup Nuxt + I Followed instructions from here https://nuxt.com/docs/getting-started/installation ```bash @@ -42,6 +57,7 @@ code nuxt3-boilerplate/ npm install npm run dev -- -o ``` + ### Setup Supabase To setup supabase and middleware, loosely follow instructions from https://www.youtube.com/watch?v=IcaL1RfnU44 @@ -53,18 +69,22 @@ npm install @nuxtjs/supabase ``` add this to nuxt.config.ts + ``` modules: ['@nuxtjs/supabase'] ``` + ### Setup Google OAuth Follow these instructions to add google oath https://supabase.com/docs/guides/auth/social-login/auth-google ### Nuxt-Supabase -Then I frigged around trying to get the nuxt-supabase module to work properly for the oauth flow. It's a bit of a mess TBH. Eventually I looked at the demo https://github.com/nuxt-modules/supabase/tree/main/demo like a chump and got it working + +Then I frigged around trying to get the nuxt-supabase module to work properly for the oauth flow. It's a bit of a mess TBH. Eventually I looked at the demo https://github.com/nuxt-modules/supabase/tree/main/demo like a chump and got it working ### Integrating Prisma -This felt like a difficult decision at first. the Subabase client has some pseudo sql Ormy sort of features already + +This felt like a difficult decision at first. the Subabase client has some pseudo sql Ormy sort of features already but Prisma has this awesome schema management support and autogeneration of a typed client works great and reduces errors. I already had a schema lying around based on this (https://blog.checklyhq.com/building-a-multi-tenant-saas-data-model/) that was nearly what I needed and it was nice to be able to re-use it. @@ -72,7 +92,8 @@ I already had a schema lying around based on this (https://blog.checklyhq.com/bu npm install prisma --save-dev npx prisma init ``` -go to Supabase -> settings -> database -> connection string -> URI.. and copy the URI into the + +go to Supabase -> settings -> database -> connection string -> URI.. and copy the URI into the DATABASE_URL setting created with prisma init. still in database, go to 'Database password' and reset/set it and copy the password into the [YOUR-PASSWORD] placeholder in the URI @@ -85,10 +106,12 @@ npx prisma generate ``` ### Stripe Integration -This was a royal pain in the butt. Got some tips from https://github.com/jurassicjs/nuxt3-fullstack-tutorial and https://www.youtube.com/watch?v=A24aKCQ-rf4&t=895s Official docs try to be helpful but succeed only in confusing things https://stripe.com/docs/billing/quickstart -I set up a Stripe account with a couple of 'Products' with a single price each to represent my different plans. These price id's are embedded into the Pricing page. +This was a royal pain in the butt. Got some tips from https://github.com/jurassicjs/nuxt3-fullstack-tutorial and https://www.youtube.com/watch?v=A24aKCQ-rf4&t=895s Official docs try to be helpful but succeed only in confusing things https://stripe.com/docs/billing/quickstart + +I set up a Stripe account with a couple of 'Products' with a single price each to represent my different plans. These price id's are embedded into the Pricing page. ### Key things I learned -- You need to need to pre-emptively create a Stripe user *before* you send them to the checkout page so that you know who they are when the webhook comes back. -- There are like a Billion Fricking Webhooks you *can* subscribe to but for an MVP, you just need the *customer.subscription* events and you basically treat them all the same. \ No newline at end of file + +- You need to need to pre-emptively create a Stripe user _before_ you send them to the checkout page so that you know who they are when the webhook comes back. +- There are like a Billion Fricking Webhooks you _can_ subscribe to but for an MVP, you just need the _customer.subscription_ events and you basically treat them all the same. diff --git a/README.md b/README.md index e01b9dc..8f3ab7a 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,9 @@ Demo site [here](https://nuxt3-saas-boilerplate.netlify.app/) Pottery Helper [here](https://potteryhelper.com/) +## Sister Project using React + Next 13 +Sick of Vue.js/Nuxt3, why not checkout React/Next sister project [SupaNext SaaS](https://github.com/JavascriptMick/supanext-saas) + ## Community Discord [here](https://discord.gg/3hWPDTA4kD) diff --git a/components/AppHeader.vue b/components/AppHeader.vue index e2e5c98..48266bb 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -1,43 +1,10 @@ diff --git a/components/Notifications.client.vue b/components/Notifications.client.vue new file mode 100644 index 0000000..face861 --- /dev/null +++ b/components/Notifications.client.vue @@ -0,0 +1,39 @@ + + + \ No newline at end of file diff --git a/components/UserAccount/UserAccount.vue b/components/UserAccount/UserAccount.vue new file mode 100644 index 0000000..2bfaef3 --- /dev/null +++ b/components/UserAccount/UserAccount.vue @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/components/UserAccount/UserAccountSignout.client.vue b/components/UserAccount/UserAccountSignout.client.vue new file mode 100644 index 0000000..509133b --- /dev/null +++ b/components/UserAccount/UserAccountSignout.client.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/components/UserAccount/UserAccountSwitch.client.vue b/components/UserAccount/UserAccountSwitch.client.vue new file mode 100644 index 0000000..2046b8d --- /dev/null +++ b/components/UserAccount/UserAccountSwitch.client.vue @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6412144..4a48c3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "supanuxt-saas", - "version": "1.4.0", + "version": "1.4.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "supanuxt-saas", - "version": "1.4.0", + "version": "1.4.1", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 1a8c1e4..d7c6eed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "supanuxt-saas", - "version": "1.4.0", + "version": "1.4.1", "author": { "name": "Michael Dausmann", "email": "mdausmann@gmail.com", diff --git a/pages/index.vue b/pages/index.vue index 64dc958..2d1a72c 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -175,4 +175,5 @@ const user = useSupabaseUser() - + + diff --git a/pages/privacy.vue b/pages/privacy.vue index a39e532..b1d4813 100644 --- a/pages/privacy.vue +++ b/pages/privacy.vue @@ -36,18 +36,19 @@

Security of your information

-

We take reasonable measures to protect your personal information from unauthorized access, use, or disclosure. - However, no data transmission over the internet or electronic storage is completely secure, so we cannot guarantee - the absolute security of your information.

+

We take reasonable measures to protect your personal information from unauthorized access, use, or disclosure. + However, no data transmission over the internet or electronic storage is completely secure, so we cannot guarantee + the absolute security of your information.

-

Changes to this privacy statement

+

Changes to this privacy statement

-

We may update this privacy statement from time to time. Any changes will be posted on this page, so please check - back periodically to review the most current version of the statement.

+

We may update this privacy statement from time to time. Any changes will be posted on this page, so please check + back periodically to review the most current version of the statement.

-

Contact us

+

Contact us

-

If you have any questions or concerns about our privacy practices, please contact us at [insert contact - information].

+

If you have any questions or concerns about our privacy practices, please contact us at [insert contact + information].

- \ No newline at end of file + + \ No newline at end of file diff --git a/plugins/trpcClient.ts b/plugins/trpcClient.ts index 0f3254e..04e6050 100644 --- a/plugins/trpcClient.ts +++ b/plugins/trpcClient.ts @@ -1,6 +1,6 @@ -import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client' -import type { AppRouter } from '~/server/api/trpc/[trpc]' -import superjson from 'superjson'; +import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client"; +import type { AppRouter } from "~/server/api/trpc/[trpc]"; +import superjson from "superjson"; export default defineNuxtPlugin(() => { /** @@ -10,15 +10,15 @@ export default defineNuxtPlugin(() => { const client = createTRPCNuxtClient({ links: [ httpBatchLink({ - url: '/api/trpc', + url: "/api/trpc", }), ], transformer: superjson, - }) + }); return { provide: { client, }, - } -}) + }; +}); diff --git a/stores/notify.store.ts b/stores/notify.store.ts index 89362b3..3df39c6 100644 --- a/stores/notify.store.ts +++ b/stores/notify.store.ts @@ -11,10 +11,10 @@ export interface Notification{ } export enum NotificationType{ - Info = "alert alert-info", - Success = "alert alert-success", - Warning = "alert alert-warning", - Error = "alert alert-error", + Info, + Success, + Warning, + Error, } interface State {