connecteev

Update for Nuxt 3: Remove dotenv, and replace all usage with runtimeConfig, per https://nuxt.com/docs/guide/going-further/runtime-config#exposing-runtime-config and https://serversideup.net/using-environment-variables-in-nuxt-3/

diff --git a/components/Podcast/PodcastContentCard.vue b/components/Podcast/PodcastContentCard.vue
index 1be10b1..ee7057e 100644
--- a/components/Podcast/PodcastContentCard.vue
+++ b/components/Podcast/PodcastContentCard.vue
@@ -73,6 +73,8 @@ USED UP!
 </template>
 

connecteev

diff --git a/components/InfiniteLoader.vue b/components/InfiniteLoader.vue
index 47f9892..4895bb4 100644
--- a/components/InfiniteLoader.vue
+++ b/components/InfiniteLoader.vue
@@ -107,11 +107,12 @@ export default {
 						this.io = null;
 						return;
 					}
-					const result = await this.$axios.$get(this.url || this.controls.next_page_url, {
+          const result = await $fetch(this.url || this.controls.next_page_url, {

connecteev

Background

• I've been trying to customize the UI of the laravel/spark-stripe v 4.1.2 package
• I've been trying to move the package from vue2 to vue3, and from Webpack (Laravel mix) to Vite.
• Later, I will want to customize part of the billing portal to look more like this.
• But right now, I am encountering a build / front-end error that I don't know how to debug.

Here are the steps I have taken so far to move from Laravel Mix to Vite:

1. Installed Laravel 10.x
2. installed Laravel Breeze for Authentication, with Inertia + Vue.js (my tech stack of choice is Vue+Inertia+Laravel+TailwindCSS with Inertia SSR enabled)
3. Installed Laravel Spark-Stripe, per the official instructions, and got it working. I installed the laravel/spark-stripe package locally in my laravel application's root directory, under {APP_URL}/_LOCAL_PACKAGES/spark-stripe_4.1.2_modified

connecteev

Migration table created successfully.
-
                                                                                                                                                                                                           
  [Illuminate\Database\QueryException]                                                                                                                                                                     
  SQLSTATE[HY000]: General error: 1824 Failed to open the referenced table 'maxims' (SQL: alter table `heart_likes` add constraint `heart_likes_maxim_id_foreign` foreign key (`maxim_id`) references `ma  
  xims` (`id`))                                                                                                                                                                                            
                                                                                                                                                                        

connecteev

Auth Requirements:

Phase 1:
* "Regular" auth - email and password, with: email validation (verify password flow), forgot / reset password flow, etc
* Allow an app to skip password verification (make it optional)
* social auth - login with Google, Facebook, Twitter, Linkedin
* Make it a microservice / api that any project can use
* Primarily for INTERNAL API consumption at first
* Unit tests, so there's 100% confidence inthe auth working
* Easily set up accounts on dev / test and production

connecteev

<template>
	<div>
        <div v-for="(option, i) in availableOptions" class="tw-w-full sm:tw-w-1/2 md:tw-w-1/2 lg:tw-w-1/3">
            <div class="tw-flex tw-justify-center">
              <input :id="option.id" type="radio" :value="option.value" v-model="finance_commitment" @click="next">
              <label :for="option.id">
                <p class="tw-px-3"><span v-html="option.title"></span></p>
              </label>
            </div>

connecteev

<Button> and <Drawer> are both imported from iView (https://www.iviewui.com/components/drawer-en)
Having <Button> within Test.vue works fine, but not when I put it in header.blade.php (which is what I want to do)

--------------------------------------------------

app.blade.php:

<!DOCTYPE html>
<html>
    <head>

connecteev

app.blade.php:
```
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <title>@yield('title'): {{env('APP_NAME')}}</title>
        <link rel="stylesheet" href="{{ mix('/css/my_tailwind.css') }}">
        @yield('cssSection')
    </head>
    <body>

connecteev

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>: KeenBrain</title>
        <meta name="csrf-token" content="Bm534DjatvVBbFpTAEjLxiuihDIrllWj60NHHHfO">

        <!-- This file contains the common CSS styling shared by all pages -->

connecteev

angularjs
emberjs -- framework for modern browsers, dynamic URL loading, templating. Uses handlebars and jquery
handlebars - templating system
showdown - implementation of markdown in js. convert markup to html
moment.js - js for readable dates
moment-timezone: convert dates, factoring in the timezone