Initial Attempt

I found another blog post that describes how to do this in Vue3 but the issue I ran into was an error indicating that "require is not defined". I don't know if this is because of JS modules, or the fact that I'm using TypeScript, or that we're using Vite for the project, but it doesn't work.

Svelte Experience to the Rescue

As I've noted in a previous blog post we can import "local" files into a Vite module using a glob import. So what I'll end up doing is grabbing all files that match a given format, convert the file names to the format I want, and globally register all components.

Grab Components

Let's assume that the file structure of the project includes a main.ts file at the root of the project, as well as a /src/lib/components folder, which is where I'll store all of the components to be globally registered. This I also stole from Svelte, although we can't just use import * from '$lib/components/... like we can in Svelte. Regardless, this felt like a natural place to store these components.

We'll be able to simply grab all components using const components = import.meta.globEager('/src/lib/components/<Name Pattern>.vue')

Create a plugin

Let's also create a plugin to grab and register all of these components, and set it up at /src/plugins/global-components.ts. It is here we'll set up the script to grab and register all components as

import { App } from 'vue'

export const register = (app: App<Element>): void => {
  // Grab all components in `/src/lib/components/` that start with "Base"
  const components = import.meta.globEager('../lib/components/Base*.vue')
  Object.entries(components).forEach(([path, component]) => {
    // Just get the file name itself, remove the .vue extension, and remove the "Base" at the front of the file name
    const pathSplit = path.split('/')
    const fileName = pathSplit[pathSplit.length - 1].split('.vue')[0].split('Base')[1]

    // Convert to kebab-case and register with a "jvp-" prefix
    const kebab = fileName.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase()
    app.component(`jvp-${kebab}`, component.default.render())
  })
}

The comments should be fairly self-explanatory, but just in case they're not this is what is happening

• Fetch all components that live in /src/lib/components that begin with Base in the file name
• For each of these components
  • Grab the file name by splitting the path on the / character, and getting the last entry in the resulting array.
  • Remove the .vue extension as well as the Base prefix
  • Convert the PascalCase file name to kebab-case using your favorite method (my Googling led me to https://medium.com/@mattkenefick/snippets-in-javascript-converting-pascalcase-to-kebab-case-426c80672abc)
  • Register the component with the prefix you want (I'm using "jvp" for these)

There are likely better ways to handle the file name search and string manipulation but this was a simple way for me to do it since I'm prescribing the naming convention myself.

Use plugin in main.ts

Now that this is set up we need to use it in our main.ts file. This is a fairly simple process. First we need to import our newly created register function and execute it with the app instance that we create in main.ts. It should look something like this

import App from './App.vue'
import { createApp } from 'vue'
import { register } from './plugins/global-components'

const app = createApp(App)
register(app)

and we should now have access to any and all components created in /src/lib/components/Base<NameRemainder>.vue throughout our app as <jvp-name-remainder /> without having to import it directly. Again, there may be a simpler/easier way to handle this functionality, but this is the first way I tried that actually worked so I'm just going to leave this here.

Dependencies

The only extra dependency needed for this section, as mentioned in the last post, is Svelte File Dropzone, which can be installed by simply typing npm i -D svelte-file-dropzone.

Script Setup

I'm going to use basic functionality for Dropzone, as indicated in the documentation with a couple of extra things:

• I will be adding a filter to not add files that include names already in the list of accepted files
• I will be wrapping the Dropzone in a <form> tag because that just feels more natural to me.
• I will be adding functionality to remove one or all of the accepted files

The script from the last blog post just had the files object and the handleSubmit method. Now I'll add a few more things.

// /src/routes/index.svelte

<script>
  let files = {
    accepted: [],
    rejected: []
  };

  const accept = ['application/pdf'];
  const maxSize = 2500000;
  let loading = false;

  const handleFilesSelect = (e) => {
    const { acceptedFiles, fileRejections } = e.detail;
    files.accepted = [
      ...files.accepted
        .filter((file) => !acceptedFiles.map((f) => f.name).includes(file.name)),
      ...acceptedFiles
    ];
  files.rejected = [...files.rejected, ...fileRejections];
  };

  const handleRemoveFile = (e, index) => {
    files.accepted.splice(index, 1);
    files.accepted = [...files.accepted];
  };

  const handleRemoveAll = () => {
    files.accepted = [];
  };
</script>

Markup

The markup for this is going to be wholly unspectacular in that I will not be including any styling whatsoever, but functionally this will work.

<main>
  <form on:submit|preventDefault={handleSubmit}>
    <Dropzone
      {accept}
      {maxSize}
      on:drop={handleFilesSelect}
    />
    {#if files.accepted.length > 0}
      <div>
        <h3>Files to be Uploaded</h3>
        <ul>
          {#each files.accepted as item, index}
            <li>
              {item.name}
              <button type="button" on:click={(e) => handleRemoveFile(e, index)}>
                x
              </button>
            </li>
          {/each}
        </ul>
      </div>
      <div>
        <button type="submit" disabled={loading}>
          {#if loading}
            ...Loading
          {:else}
            <span>Submit</span>
          {/if}
        </button>
        <button type="button" disabled={loading} on:click={handleRemoveAll}>
          Remove All
        </button>
      </div>
    {/if}
  </form>
</div>

Style

As an aside, I also added a little bit of styling to make it centered

<style>
    main {
        display: grid;
        place-content: center;
        height: 100vh;
    }
</style>

The resulting page doesn't look great, but if you click on the box and choose the files you want to upload it should look like this Then if you click submit you'll see, once the process is completed, that the files show up in the assigned folder

Summary

That's it. The functionality is nothing terribly complicated when you look at everything in the aggregate, but all of the moving pieces can be a bit complex. Like I mentioned, I spent quite a bit of time trying to figure all of this out for the first time, but now that I've gotten it working I wanted to share it with you all. See you next time.

In this post I'll set up functions to send any necessary files to these endpoints to upload. Then in the last post I'll add the markup to handle file acquisition.

SvelteKit Component Script

The functionality for this script is fairly complex, so most of this post will handle this logic.

Variable Instantiation

The only thing we'll really need at this point in time is an object to hold accepted and rejected files. I'll be using Svelte File Dropzone for file acquisition and the setup used in the docs is as follows

<script>
  let files = {
    accepted: [],
    rejected: []
  }
</script>

That's it. From the perspective of basic functionality this is all we'll need. When I add in Dropzone-specific stuff I'll add more variable instantiation, but I'll leave that for the next post.

Handling Form Submission

While I was working on this for my client, this was the feature on which I spent the most time. I'm not terribly familiar with handling readable streams, transmitting them to an endpoint as the correct type, etc. On top of that, I was trying to make the submit button disabled and add a loading spinner and then once all of the files were uploaded I would then add a notification and stop the loading spinner. This would have been less of an issue with a single file, but I wanted to allow for multiple file submissions at the same time. I found a great Stack Overflow answer about how to handle this, and it effectively wraps the reader.onload functionality in a Promise and you can just await a Promise.all for all of the necessary files.

File Reader

This will be broken up into two smaller sections:

• The file reader
• The rest of handleSubmit

Following along a bit of the aforementioned Stack Overflow answer, I'm going to share the code in its entirety and discuss after

const filePromises = files.accepted.map((file) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = async () => {
            try {
                const response = await fetch('/upload-files', {
                    method: 'POST',
                    body: reader.result,
                    headers: { 'Content-Type': 'application/pdf' }
                });
                const { id } = await response.json();
                const body = JSON.stringify({ name: file.name, fileId: id });
                await fetch('/rename-file', {
                    method: 'POST',
                    body
                });
                resolve();
            } catch (err) {
                reject(err);
            }
        };
        reader.onerror = (error) => reject(error);
        reader.readAsArrayBuffer(file);
    });
});

The general flow of this method is as follows (for each file in the files.accepted array)

• Create a new FileReader
• When the file is fully loaded, try sending the reader.result element to the previously-created endpoint with the correct Content-Type header
• Pull the id value from the endpoint that we'll use to rename the file
• Create and stringify the submission body to rename the file
• Send the data to rename the file using that previously-created endpoint

Handle Submission

I'm going to add more functionality than is necessary to the handleSubmit method and will explain why after

const handleSubmit = async () => {
    loading = true;
    const filePromises = files.accepted.map((file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = async () => {
                try {
                    const response = await fetch('/upload-files', {
                        method: 'POST',
                        body: reader.result,
                        headers: { 'Content-Type': 'application/pdf' }
                    });
                    const { id } = await response.json();
                    const body = JSON.stringify({ name: file.name, fileId: id });
                    await fetch('/api/rename-file', {
                        method: 'POST',
                        body
                    });
                    resolve();
                } catch (err) {
                    reject(err);
                }
            };
            reader.onerror = (error) => reject(error);
            reader.readAsArrayBuffer(file);
        });
    });
    try {
        await Promise.all(filePromises);
        files.accepted = [];

        /* Extra functionality for fun */
        notification = true;
        setTimeout(() => {
            notification = false;
        }, 10000);
        fetch('/api/send-uploaded-message', {
            method: 'POST',
            body: JSON.stringify({ messageType: 'success' })
        });
        /***************************/
    } catch (err) {
        console.log('err', err);
    } finally {
        loading = false;
    }
};

I've added in a bit of extra functionality for demonstration purposes.

• If we want to have a loading spinner that is displayed based on a variable called something like loading then we can instantiate it when the function is triggered and then stop it in the finally block of the try/catch/finally group
• If we want to include a notification on the page then we can do that after the Promise.all evaluation
  • I set up a setTimeout to close the notification automatically after 10 seconds
• We can also have a separate endpoint to notify whomever it's worth notifying upon successful completion of the file upload, which I've added as well

Summary

These last two posts have been a bit shorter, but I wanted to keep them to the point and not clutter with a lot of information. In the next (last) blog post I'll add functionality to handle for file management within the component itself.

In this post I will show you how to set up the folder in Google Drive, as well as how to share it correctly, and then add SvelteKit endpoints for handling file uploads and saving them in the necessary folder.

Google Drive Folder Setup

The first thing you need to do is go to https://drive.google.com/drive/my-drive and create a folder where the files will be stored, which I will set name 'Hashnode File Upload'. You'll then want to open that folder and grab the ID of the folder, which should show up after the /folders/ location in the URL. Copy this value and store it in the previously noted .env file as VITE_GOOGLE_DRIVE_FOLDER_ID. After the encryption information and this, our .env file should look like

VITE_SERVICE_ENCRYPTION_IV=t8bcKDaNPRSGH3no
VITE_SERVICE_ENCRYPTION_KEY=hiHa4OLm9xLchadg
VITE_GOOGLE_DRIVE_FOLDER_ID=1StDQlW29iO72tlq6APa8DXT2hegx742l

Sharing Capabilities

In order to allow for the created service account to upload to this folder, you also need to add the email address set up in the service account .json file as an editor to the folder. To remind you, the email address in use for this project would be file-upload@sample-project-for-hashnode.iam.gserviceaccount.com Go back to the parent folder of the one for which you grabbed the ID and right-click on the folder, and select "Share" Then you simply need to add this email address as an editor, and click "Share"

SvelteKit File Upload Endpoint

Now that this is done, I will create a file within the src/routes folder to handle file uploads.

// /src/routes/upload-files.js

import { service } from '$lib/service';

export async function post({ request }) {
    const body = request.body;
    const drive = service();
    const folderId = import.meta.env.VITE_GOOGLE_DRIVE_FOLDER_ID;
    const file = await drive.files.create({
        resource: { parents: [folderId] },
        media: { mimeType: 'application/pdf', body },
        fields: 'id'
    });
    const { id } = file.data;

    return { statusCode: 200, body: { id } };
}

Let's look a bit into what's happening with this function.

• Since I want to upload a file instead of handle JSON I'm using request.body instead of the more typical await request.json()
• The drive and folderId lines are fairly self-explanatory, with the service function coming from what was built in the last post
• The methodology of uploading is done via the await drive.files.create method. The argument for this function was pulled from this post with some slight modifications.
  • I don't need the name because I'm going to be creating a separate function to rename uploaded files
  • Since I'm not using the file system, I didn't use the fs package or anything like that. The request.body itself is a readable stream of just the file contents so I just use that as the body.
  • I'm assuming that this is for a PDF but this can be used for other file types (for example image/*).
• The id that is returned from file.data and returned from the function itself is for the purpose of eventually renaming the file.
  • The reason I'm handling the name in this way is because I don't know how to access the file name from the readable stream itself

SvelteKit Rename File Endpoint

If you go look at the uploaded file you'll see that the name simply reads "undefined". Like I said, I don't know how to grab the file name from the readable stream, but what I've done instead is return the id from the uploaded file, which we will use in a newly-created /src/routes/rename-file.js endpoint.

// /src/routes/rename-file.js

import service from '$lib/service';

export async function post({ request }) {
    const data = await request.json();
    const drive = service();
    const { fileId, ...body } = data;
    await drive.files.update({ fileId, resource: body });
    return { statusCode: 204 };
}

This is a fairly simple function as we can see. I'm simply extracting the fileId from the request data, and storing the remaining information as a constant called body using the JavaScript spread operator.

Summary

That's it for this short blog post. In the next one I'll work on the in-component functionality where we send any/all files to these routes for upload and renaming.

I just finished working on a project for a client/friend in which she wanted to have a page where she could have forms available for her own clients to download which they would then upload, also on her site. The site itself is a static site deployed to Netlify and built using SvelteKit, so right away I was going to be building this functionality in a server route.

The next decision that had to be made was the file storage. S3 is an easy place to handle static content, but my friend isn't a technical person and setting up Amazon IAM for a non-technical person, as well as assigning access within IAM, is no walk in the park. We had already been sharing files and such using Google Drive so I figured this would be the best place to handle this functionality going forward.

Google Drive API

Enabling the API

The first thing we need to do is enable the Google Drive API for this project. To do this, first create a project and call it whatever you like. Then you'll go to the left menu and hover over "APIs & Services" and click on "Enabled APIs & Services" After clicking on this, you'll click on "ENABLE APIS AND SERVICES" and search for the Google Drive API. Once you find it and click on it, you then click the button that says "ENABLE". Once this API is enabled you'll need to set up credentials to access the API.

Setting up a service account

If you go into Google's developer console, you can find a quickstart for Node.js for the Drive API. The authentication needed for this quickstart is a service account. To set up a service account, open the left-hand navigation drawer, hover over "IAM & Admin" and you will see an option for service accounts You will then want to click on "CREATE SERVICE ACCOUNT" at the top of the page and name it whatever you want (I'm choosing to call it File Upload). Then click "DONE" Then we'll be directed to the list of service accounts for the current project, where we will click on the field in the "Email" column Once here, we will click on "KEYS" in the sub-menu at the top of the page Then click on the "ADD KEY" dropdown menu and click on "Create New Key" Make sure the JSON Key type is selected and click on "CREATE" If we then open the resulting .json file that is downloaded it will look something like

Storing the .json file

If we were using this service account for a generic Node.js backend project we could just use the file as is. Since I want to deploy this project as a static site in Netlify, though, I'm unable to upload an entire .json file. I tried stringifying the file to just save it as an environment variable that I would then parse and use, but AWS Lambda has a 4KB limit on environment variables and this stringified JSON file goes over that limit.

Encrypting the file

There is a very helpful article on Vercel's support site that describes encrypting the file and uploading the SERVICE_ENCRYPTION_IV and SERVICE_ENCRYPTION_KEY values as environment variables. Since the data itself is encrypted you can save it in your code and commit it to GitHub and then instead store the decryption information as environment variables. So, the first thing we need to do is go to a site for AES encryption and upload our recently saved .json file. Then we select CBC mode, and enter two 16-character strings, generated from random.org. We'll save the first one as the IV value and the second as the KEY value. Make sure to save them in a safe place as we'll use them later (this is likely a .env file in your project's root directory). Then click on "Encrypt" and you should get the following

Storing the relevant information in our project

We then want to create a service-account.enc.js file in the /src/lib folder, and in that folder we'll simply write

export const encrypted = 'Okf7DzlxsDj0KoE2HfCC5AVgfZeLarc1hqX2lLtY68ctVere/ArTUAyuVJ8jVOG77OGWTbFQnuEmsC1qrPX5agwZLaiTYar24oHwDxTM3SFitoBGP+26EgpMYCBulz7lH59vy18+0epWce13vwaFiXB8e3Jukl5dxvsLxu/TUNAU0vmNScvYe7mBKKuEWn6hhW+NAkHojsB+pMkwsZa43E3lIXOrF9nk/QmSGBEVuPOwroQhUw47vx6b2oXZ9zdcZVBSEQUCM9/ZIHD/oqfAG1u8A494H4+Chh4fxpud+752Sm3Z+Tp7yWF4/nFlxfPohbrLeLcRav/r7r8xRLNkA3YGEQQFh1tArmNa0GjiFGcH7ymboINFIVJaBXVc00XPJuaQ1p6MmHbHXJIxgaGvKEmxMsFef35Xi+rRlZICZmp0/ss/i/3yV0wLatobN0UzULjIZj9gfIlRM+3aNOW5uqYcVUBOcyn49cw2H648sEkyTs8Z4vLfJiN3orjvIPTrxdSfO8FagFcV2P/pTZicfsVzCbN3a8xOXRSsxOktnWCKZHXuXzog8I6RLrkznzVDSxjPm54uXrGPWTUPw+X6EG0RvSeV1w3A4F/FVBedJT/sm6mcfF1yj8HP+lT9qvujF7lpkqYaLnmoBo7FkbdFZq6Ra+F79VcdWOx4aC5a+0ibu2q2pnQ9Fiw58cV87tRefxrCNaW+/JrOlpZ+mmCgyL/1zJpFabzQ0sCIzx1a5Q7FHocNttX8pSwjSgD3cM8ZgKCPyO6UBCmFzfgJ+AY2ksqYDKxdoZh84JHFyKmzmbb20qeQF2M6Ux+lumxJYyQlC6MfFE95g5HHXtdOGpYrB83LrcK9OShjcRkCMoIqOHlG8CbyhBAVQgsHzB09HzTkMgO0x/sfnvryNb7r0j7hgDFFiWAeIr/0qXIOjOJ3npF/E3OTOZ8Q8dTuDQ75Wd3fClvkq1aYBnsXSjZRWGl4q38+MFjU4+yb+C4Tfk37Yd+x/4b18ey5g9EkFAiyXQtsZiDVjRIvcvJSiNLtce18Asb874z8pVe0Nui4fFwtRtYJzJoaGnx6BtIeNu0A6U9NJRuqXIbK0wAH4BHwY/sS+rUjxgfr8ag32O4cPIGHlChl2INH/WDHUtYx9O4L32q1ijLxb5Kz73vfJj9bgWVa8fIyDT2U05/BLfTn3fHbDpJR90c+ImpvcPUaD1Df/jJCuBrAR3EPN8r71VgSlQhKsGIgm44TDV1lWyOXPotXoM1BQHeQfOtbyYehufYmaPCEB/L4wcDtiOo4M4qyCYZeOvlsEv63DauNdQahl6hPzuw+V7CSRIwVP4YnaPpoYiGZAw3VrcQO/g0XLaPT2RfT2zq5Yp8sJdgc82imIZTynsnzf1ZaJfW7bToR466RY9SSqHpm92MyqAxbVejv3SAuYG64Y/5yIPh5Dv6ce93kPRI443z4Pv/EIaTpwF1+kzS3iIF+ODc2PtqJu61fWnB4ydXm7iWoMH1kkXpYHaTyqn5pIatowkcQEBvkmNoWKdxlN/mfynAcy117USXujKyXd58sgRSG3vPPXTPPLm0M4H6Aqe9MSR6iuf0YCNjiNI4HWrnlbhNi22Rnv6zO8cSg/B7DS/V1xL4B3eykH5SU67nfm3aidjh/KrR5VGIU0/zSyJ/J9DLi5UpOAqKm3hEAQTFz8rfLV2bTjWU9XpcDghl0UG9rAqYMCFNCj2w8QZPzZx4C42cR+mCevG8w+k7EcXnm6F93yczsOWFClMolGDW+CjbJfQpHkxmmdVxap4PziCZ6p2JU2HDhnoazxrvlshir2OWozfzA94jQ5MKhU6O5ozxELS4n0t9EnjNoS+5FI6hgi8sKNJN1RXjgpcDeiVvp+sLWRT8r/S5tAACYgI23tNR1W7e/oodJxKlTqBADybpTz3NqonLp0WEHZTPeUEcelcvqBsUlCCs46sU/hWFCR0IXLT6rCZjAEeunqNO+4Q78D4WQIzvcGqOvJWDiPqjIhwaj6VI3GoxXLN3Dq0fz395fdl6DB/gPEtuP8P4az7py3ZYEdEBunT4QSEkByT8kwaYSJbPOLoKzFMBiBNfMYofxyiAg6rf0+Mg9BZVvXxAJ4b9HT5+OvwiN/MuiC5rSpOJkmvMPEbmhSztenMbZOtNH9EXLzsCZq2gTe21H+yPXRZztD8N80yFDyNWQzq+FLh8K7h+JNg0E32bs6lp7DcYKmjshCa181lfpk6n9EC9JPusofkco1FNCha7YaKrFQLh3zSXikKgKLhQYJx7CKt12wCXe/9r4ERkuz9mRFFkaz7EqReFETEKv5iCO4RAotUCVSsADKc9ikVuy0h2Jyllt735tLHFZTZh7DCP+NDX7/lbzlKkXrCjaBYkrtb2Wb6KvMaAWTUJpLqs1DbOKiKLBFsIzJK32/+8OrRckqoJL/t7c95U93ct2VA/lQiRU9dvIB/luU7C4r/Kuywh5nI85gqPovvvEzTm2AUChmlzKRrsLznh388c59DjBGX8F7jDEBWJbAPuoCstIRM3z4jOwNFnHCNNktaSNEM9HHmV47k8p6tBsU4rcZG34UsLfyJQQH7Iz7GEkeVRuRfVDcIt6hu+AItSfVoVnsVPF2+2QpmtFzf3qZzNxA5sngtxuqOeUoNZ5WihUocrmbrnQZ6F9eUEaWeCn/qU17tal3vvj2LLOMcwwUAZJM1Exbg94WHdGZEeWGKtCTq8PjxnAw8fNMEO3b3IbrU8WCcfj4BJm/0dy6Uz7V495Lr2B4R6tHIHAwJkBgAlci0FCdLg5/WizXw1HLZmeoaaVzucwp6SoJbSIqfEw7I2h8LNGiWJ/z1wgC8wIiVK3AWqwTi4d6DM7qcCzeKYNhkJOag7qFlM8i0tZTMnyge5EjkG7b0rs9EuWZKiBkaQJIBvNu5L/IAMfXBvQJROO+kFZro6+5bg5iOu9FscX+NwYaEFesOjOuMeDoBvOfGEOnOfY0yPOOal5DjyRiiL+dLsJdkgwOhXdMhh53d7tzzKqcYvCVfPPhkVQCnf2RfL7QKNCR99/lsEMWZxizZBEWvXDuFBbyOfLhdY4fZr1QXzpThVLcmnvNxWU2IviU9uyKI7GRxX69m0jw0Yrbotx2CwOmqT89gwINMf7VHDxMoYtSAxBnw=='

Then, we'll also create a file at /src/lib/decrypt.js that looks like the following

// /src/lib/decrypt.js

import crypto from 'crypto';

export const decrypt = (data) => {
    const algorithm = 'aes-128-cbc';
    const decipher = crypto.createDecipheriv(
        algorithm,
        import.meta.env.VITE_SERVICE_ENCRYPTION_KEY,
        import.meta.env.VITE_SERVICE_ENCRYPTION_IV
    );
    let decrypted = decipher.update(data, 'base64', 'utf8');
    decrypted += decipher.final('utf8');
    return JSON.parse(decrypted);
};

where the environment variables noted before have been saved with the VITE_ prefix, as that is necessary to import the environment variables here. Finally, we'll need to create a /src/lib/service.js file where we import the encrypted data and the decrypt method and we return an instantiated Google Drive instance.

// /src/lib/service.js

import { google } from 'googleapis';
import { encrypted } from "$lib/service-account.enc";
import { decrypt } from "$lib/decrypt";

const getDriveService = () => {
    const SCOPES = ['https://www.googleapis.com/auth/drive.file'];
    const credentials = decrypt(encrypted)

    const auth = new google.auth.GoogleAuth({
        credentials,
        scopes: SCOPES
    });
    const driveService = google.drive({ version: 'v3', auth });
    return driveService;
};

export default getDriveService;

note: This assumes that you have already installed the googleapis package using npm i -D googleapis.

Summary

Now that we have all of this set up, we will be able to import the service module into any file where we want to use the Google Drive API and instantiate it in a manner like so

import service from '$lib/service';

export async function post({ request }) {
  const drive = service();
  ...

In the next blog post in this series I'll set up a server endpoint to grab a file and upload it to a specific sub-folder in Google Drive itself.

This post is also available on my main page at https://www.jvp.design/blog/building-a-blog-with-nuxt-content-tailwind

For those who want to follow along in code, you can get it from https://github.com/jvp-design/nuxt-blog-example

A video accompanying this post will be released on Thursday, 16-Jun. The link will be posted here when it's live.

Intro

In the last blog post I described how to set up a blog using SvelteKit with MDsveX and Tailwind. It worked well enough that it warranted being featured in Hashnode's feed as well a share on LinkedIn but, if I'm being honest, it felt a little hacky. Sure, it worked, but there was too much "custom" functionality I needed to add to get it working. Also, I tweeted a couple of weeks ago about how excited I was to try playing with Nuxt Content v2, but it wasn't ready at the time that I was ready to write the last blog post and record the last video.

Well well well, my handful of friends who may actually look at this, I've played around with Nuxt Content v2 to write this post. Also, I want to give a quick shoutout to Behon Baker for the video he released a couple of weeks ago about this. This may feel similar to what he did, but I'm trying to create as much content as I can of my own so here we go.

Set up the project

Per the documentation, we can set up a new Content v2 project by running

npx nuxi init nuxt-blog-example -t content
cd nuxt-blog-example
npm i

Running this sets up a very minimal scaffold for a project and when I run npm run dev and navigate to http://localhost:3000 I'm met with the following window For what it's worth, when you go to http://localhost:3000 you should be shown what is on the index.md page but for some reason that didn't seem to work for me. No matter, let's continue.

Install Tailwind

This is also a fairly simple process, laid out succinctly in the documentation for the Nuxt/Tailwind module. To get started, for those who don't want to navigate elsewhere, you simply install the module and initialize Tailwind

npm i -D @nuxtjs/tailwindcss @tailwindcss/typography
npx tailwindcss init

then you just need to add the module to the modules section of your nuxt.config.ts file.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss']
})

Then, we create a new file, called tailwind.css under a newly created assets/css folder at the root of our project. It is in this file where you'll add your tailwind directives

/* assets/css/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

If you want to name the file something else that's fine you'll just need to configure the module to point to the location where you've stored this file. You can read all about that in the documentation for the module.

In order to save time, I'm going to just re-use the tailwind.config.js file from the previous post, copy the content from the base app.css file from that post, and copy over the fonts. Instead of saving the fonts in /static/fonts/..., though, they'll instead be saved in /assets/fonts/... and we'll need to update the base css file to account for this.

tailwind.config.js file

For those who don't want to go elsewhere, this is the content that will go in the tailwind.config.js file

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{html,js,vue,ts}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['uncut-sans', ...defaultTheme.fontFamily.sans],
                serif: ['sprat', ...defaultTheme.fontFamily.serif]
            }
        }
    },
    plugins: [require('@tailwindcss/typography')]
};

Note that I have changed the extensions in the content attribute of module.exports to include a .vue extension instead of a .svelte one.

assets/css/tailwind.css file

As previously mentioned, we're going to copy over the same content from the last blog post's /src/styles/app.css into /assets/css/tailwind.css file, while also changing the location of where the font files are stored

/* /assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-serif;
    }
    @font-face {
        font-family: 'sprat';
        src: local('Sprat'), local('sprat'), url('/assets/fonts/sprat/Sprat-Regular.otf');
        font-weight: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'sprat';
        src: local('Sprat'), local('sprat'), url('/assets/fonts/sprat/Sprat-RegularMedium.otf');
        font-weight: 500;
        font-display: swap;
    }
    @font-face {
        font-family: 'sprat';
        src: local('Sprat'), local('sprat'), url('/assets/fonts/sprat/Sprat-RegularBold.otf');
        font-weight: 600;
        font-display: swap;
    }

    @font-face {
        font-family: 'uncut-sans';
        src: local('Uncut-Sans'), local('Uncut Sans'), local('uncut-sans'), local('uncut sans'),
        url('/assets/fonts/uncut-sans/Uncut-Sans-Regular.otf');
        font-weight: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'uncut-sans';
        src: local('Uncut-Sans'), local('Uncut Sans'), local('uncut-sans'), local('uncut sans'),
        url('/assets/fonts/uncut-sans/Uncut-Sans-Medium.otf');
        font-weight: 500;
        font-display: swap;
    }
    @font-face {
        font-family: 'uncut-sans';
        src: local('Uncut-Sans'), local('Uncut Sans'), local('uncut-sans'), local('uncut sans'),
        url('/assets/fonts/uncut-sans/Uncut-Sans-Semibold.otf');
        font-weight: 600;
        font-display: swap;
    }
}

Site content

Now that the app is up and running it's time to start creating content. The first thing we'll do is open /app.vue and set the height of the app to be the height of the screen, similarly to what we did in the previous post.

<template>
  <div class="h-screen">
    <NuxtPage />
  </div>
</template>

We can add styling to this in a similar manner to how I set up the __layout.svelte file in the last post. Nuxt does support multiple layouts, but they recommend that if you're only going to use one layout then just do all of the necessary styling in the app.vue file.

Landing page

Next we need to set up the main landing page in a similar manner to the previous post. Within the /pages directory (where currently the only file that exists is [...slug].vue) I'll now create an index.vue file and add the following content.

<template>
  <div class="grid h-screen place-content-center gap-3">
    <h1 class="text-5xl text-blue-500">Welcome to Nuxt Content</h1>
    <p class="text-xl text-red-600">
      Visit <a href="https://content.nuxtjs.org/">content.nuxtjs.org</a>
      to read the documentation
    </p>
    <nuxt-link
      href="/blog"
      class="mx-auto rounded-xl bg-amber-700 px-20 py-4 text-white"
    >
      Go to Blog
    </nuxt-link>
  </div>
</template>

Blog content

Now that we have a landing page up and running we have to create something that will be loaded when we click on the button on the landing page. There are plenty of ways that we can host blog content, but the idea behind this site is this would be a "normal" site with a blog section so we're going to create a blog folder within the already existing content folder. This is where we'll store all of our articles. We get nesting by simply doing this; if you move the about.md file into this new folder and go to http://localhost/3000/blog/about then you should see the same thing you saw before (you may need to restart the server). We also want a page, though, that will display all of our blog posts, which was the /src/routes/blog/index.svelte component in the last post. To do this, we simply create a /pages/blog/index.vue file and, for now, add some dummy content

<template>
  <h1 class="grid h-full place-content-center text-5xl">Blog Home</h1>
</template>

The next thing we need to do is somehow fetch the articles in the /content/blog folder to display here.

Nuxt Content built-in helpers

Nuxt Content ships with some very helpful built-in components, about which you can read here https://content.nuxtjs.org/api/components/content-doc. Before describing the two methods that we can use to fetch content, there is a built-in helper called <ContentNavigation> that will return a list of objects with "name" and "path" attributes strictly for navigation. This does not provide access to things like the author, date, or description, so I'll leave exploration of that one to the reader.

ContentList

The very first helper that we can use for a "list" view is <ContentList>. You can view the documentation for this helper at https://content.nuxtjs.org/api/components/content-list but I'll update the /pages/blog/index.vue component below.

<template>
  <main class="bg-white px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
    <div class="mx-auto max-w-lg lg:max-w-7xl">
      <div class="border-b border-b-gray-200 pb-6">
        <h2
            class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl"
        >
          Recent Posts
        </h2>
      </div>
      <div class="mt-12 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
        <ContentList path="/blog" v-slot="{ list }">
          <div
              v-for="article in list"
              :key="article._path"
              class="flex flex-col justify-between rounded-lg border border-gray-200 p-4"
          >
            <nuxt-link :href="article._path">
              <p class="text-xl text-gray-900">{{ article.title }}</p>
              <p class="mt-3 text-gray-500">{{ article.description }}</p>
            </nuxt-link>
            <div class="mt-6">
              <a
                  :href="`?author=${article.author}`"
                  class="text-sm font-medium text-gray-900"
              >
                {{ article.author }}
              </a>
              <div class="text-sm text-gray-500">
                <time datetime="2020-03-16">{{ article.date }}</time>
              </div>
            </div>
          </div>
        </ContentList>
      </div>
    </div>
  </main>
</template>

You'll notice in the above component some very similar functionality. First, the styling is identical to what existed in the index.svelte file. Then, the main differences are in the way content is rendered in Vue vs in Svelte.

• Where we previously wrapped iterated content in an {#each}{/each} block in Svelte we use v-for in Vue
• The colon : in Vue is a shorthand for the v-bind directive. In Vue, :href="article._path" would be equivalent to href={article._path} in Svelte
• In Vue we use a {{ }} syntax to render a dynamic variable instead of the {} in Svelte

The other main difference is including the built-in <ContentList> component, which will fetch all content at the /content directory unless we tell it otherwise, which I did by including the path="/blog" attribute, telling it to fetch content from /content/blog for this rendered content list. In looking at the resulting page at http://localhost:3000/blog we see There are a couple of things we need to "fix" to display things as we intended, but we automatically get the data without having to tell content where/how to parse the .md files. All we've had to do is just point to the location and Nuxt Content knows where to find everything.

Small update to posts

In the SvelteKit example I had to manually choose what I wanted my excerpt to be. In Nuxt Content all you need to do is add a little code snippet, <!--more--> after the code you want to be used as the description. Everything before this tag will be included in the description (as well as in the main article) and that's all you need to do. With that in mind, this is what the posts will now look like /content/blog/foo-bar.md

---
title: Foo Bar
author: Jeff
date: 2022-04-15
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum odio nisl, nec pretium dolor varius in.
<!--more-->
Quisque tincidunt egestas libero rhoncus blandit. Etiam elit leo, facilisis id magna sit amet, vestibulum finibus nulla. Vestibulum porttitor nisl id ligula accumsan, et dapibus justo cursus. Phasellus congue mauris vitae dictum auctor. Sed vitae mollis quam. Morbi venenatis metus ligula, sit amet consectetur eros pharetra vel.

Maecenas efficitur mauris eu ex viverra, ut consequat metus ultrices. Sed imperdiet leo odio, in aliquam orci sagittis ut. Vivamus eget sem et nibh faucibus luctus vel a enim. Sed orci tortor, semper ut vulputate at, hendrerit dapibus dolor. Pellentesque tincidunt tempor efficitur. Etiam efficitur pellentesque nisi, sit amet feugiat nisi. Maecenas nisl odio, viverra vitae rhoncus eu, placerat vitae ante. Quisque suscipit nibh lacus, sit amet facilisis tellus fermentum in. Integer nec lacinia risus, ut lobortis ex.

Integer nec ultricies nisi. Curabitur odio mauris, scelerisque at luctus a, bibendum eget velit. Vivamus id tellus lectus. Nulla in purus sit amet mi tincidunt commodo. Ut auctor ante a mauris dignissim laoreet. Nullam magna arcu, tincidunt nec risus et, mattis fringilla augue. Suspendisse imperdiet, purus vel pharetra bibendum, enim purus convallis quam, ut faucibus nibh libero in enim. Curabitur feugiat leo ac accumsan tempor. Ut non convallis mauris, sed rutrum libero.

Maecenas vehicula maximus justo, pellentesque consequat sem dignissim a. Proin quis lectus molestie, pellentesque massa in, egestas orci. Vestibulum facilisis enim at magna scelerisque, quis suscipit quam ultrices. Proin a rutrum tortor. Proin vel scelerisque nunc. Nullam condimentum sit amet magna eu rutrum. Quisque magna enim, aliquet ut blandit et, viverra eu leo. Sed molestie sem et quam consequat mattis. Donec elit velit, cursus at ipsum nec, ullamcorper tincidunt neque.

Nunc convallis odio justo, non interdum dolor ultricies interdum. Curabitur accumsan sem a iaculis placerat. Donec eu facilisis sem, vel bibendum risus. Aliquam non tincidunt est, a auctor magna. Ut erat libero, commodo non malesuada quis, porttitor sit amet libero. Curabitur pulvinar ornare leo id efficitur. Donec sollicitudin arcu venenatis odio elementum, at venenatis erat efficitur. In porta mi et sollicitudin faucibus. Vivamus vel metus interdum, facilisis nisl at, ullamcorper mauris. Sed ac nisl at dolor varius aliquam. In facilisis pretium interdum. Sed tempus purus at pulvinar scelerisque. Etiam eu purus eleifend, commodo turpis eget, aliquet turpis. Mauris fermentum magna dictum lorem bibendum tempor.

/content/blog/foo-baz.md

---
title: Foo Baz
author: Alice
date: 2022-07-15
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum odio nisl, nec pretium dolor varius in.
<!--more-->
Quisque tincidunt egestas libero rhoncus blandit. Etiam elit leo, facilisis id magna sit amet, vestibulum finibus nulla. Vestibulum porttitor nisl id ligula accumsan, et dapibus justo cursus. Phasellus congue mauris vitae dictum auctor. Sed vitae mollis quam. Morbi venenatis metus ligula, sit amet consectetur eros pharetra vel.

Maecenas efficitur mauris eu ex viverra, ut consequat metus ultrices. Sed imperdiet leo odio, in aliquam orci sagittis ut. Vivamus eget sem et nibh faucibus luctus vel a enim. Sed orci tortor, semper ut vulputate at, hendrerit dapibus dolor. Pellentesque tincidunt tempor efficitur. Etiam efficitur pellentesque nisi, sit amet feugiat nisi. Maecenas nisl odio, viverra vitae rhoncus eu, placerat vitae ante. Quisque suscipit nibh lacus, sit amet facilisis tellus fermentum in. Integer nec lacinia risus, ut lobortis ex.

Integer nec ultricies nisi. Curabitur odio mauris, scelerisque at luctus a, bibendum eget velit. Vivamus id tellus lectus. Nulla in purus sit amet mi tincidunt commodo. Ut auctor ante a mauris dignissim laoreet. Nullam magna arcu, tincidunt nec risus et, mattis fringilla augue. Suspendisse imperdiet, purus vel pharetra bibendum, enim purus convallis quam, ut faucibus nibh libero in enim. Curabitur feugiat leo ac accumsan tempor. Ut non convallis mauris, sed rutrum libero.

Maecenas vehicula maximus justo, pellentesque consequat sem dignissim a. Proin quis lectus molestie, pellentesque massa in, egestas orci. Vestibulum facilisis enim at magna scelerisque, quis suscipit quam ultrices. Proin a rutrum tortor. Proin vel scelerisque nunc. Nullam condimentum sit amet magna eu rutrum. Quisque magna enim, aliquet ut blandit et, viverra eu leo. Sed molestie sem et quam consequat mattis. Donec elit velit, cursus at ipsum nec, ullamcorper tincidunt neque.

Nunc convallis odio justo, non interdum dolor ultricies interdum. Curabitur accumsan sem a iaculis placerat. Donec eu facilisis sem, vel bibendum risus. Aliquam non tincidunt est, a auctor magna. Ut erat libero, commodo non malesuada quis, porttitor sit amet libero. Curabitur pulvinar ornare leo id efficitur. Donec sollicitudin arcu venenatis odio elementum, at venenatis erat efficitur. In porta mi et sollicitudin faucibus. Vivamus vel metus interdum, facilisis nisl at, ullamcorper mauris. Sed ac nisl at dolor varius aliquam. In facilisis pretium interdum. Sed tempus purus at pulvinar scelerisque. Etiam eu purus eleifend, commodo turpis eget, aliquet turpis. Mauris fermentum magna dictum lorem bibendum tempor.

/content/blog/hello-world.md

---
title: Hello World
author: Jeff
date: 2022-05-27
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget massa sit amet arcu varius lacinia nec quis lacus.
<!--more--> 
Proin auctor lectus a volutpat porta. Nullam eget ipsum convallis, elementum orci sodales, blandit velit. In imperdiet, ligula sed ultricies pharetra, metus mi consequat dui, vitae luctus dolor ligula eu nunc. Fusce consequat mauris ac egestas iaculis. Quisque pharetra et ante maximus convallis. Nulla sollicitudin velit molestie mauris dignissim, at hendrerit diam fringilla. Donec mollis eget ex non iaculis. In a vehicula nisl. Donec dapibus orci in enim posuere, non rhoncus risus ultrices. Pellentesque elementum metus ipsum, ut scelerisque mauris ultrices vel.

Aliquam ullamcorper est vehicula, suscipit nulla pellentesque, convallis odio. Praesent eget elit eget magna fringilla pharetra tempor quis magna. Proin et est vestibulum neque rhoncus mattis non vel lacus. Proin vulputate risus vel dignissim vestibulum. Quisque id sollicitudin neque, sed sagittis urna. Vestibulum vehicula metus sed eros venenatis, sit amet facilisis nunc porta. Nam pharetra luctus sapien, ut venenatis nibh tincidunt mollis. Phasellus efficitur, felis vitae mattis cursus, sapien diam vulputate dui, sit amet pulvinar ante ipsum non urna.

Fusce est nulla, efficitur vitae turpis eget, pretium rutrum turpis. Fusce at lectus eros. Phasellus convallis condimentum dolor ac rutrum. Integer commodo augue et dui efficitur tincidunt. Nam scelerisque egestas quam, vitae ultrices turpis tincidunt rhoncus. Duis rutrum placerat erat. Ut ac tincidunt elit. In laoreet dictum mauris nec posuere. Curabitur tempus, dolor malesuada ultrices feugiat, ipsum eros faucibus tellus, eu ultricies nunc est sed dolor. Suspendisse nisi eros, vehicula vitae iaculis sit amet, aliquet sit amet leo. Sed euismod urna at eros posuere laoreet. Curabitur in sodales lorem. Nulla rutrum aliquam felis ac tempor.

Ut pretium vitae elit ac facilisis. Aliquam nisi tortor, feugiat at lacus sed, condimentum egestas urna. Vestibulum hendrerit augue non urna volutpat, et fermentum tortor pellentesque. Aenean eget pharetra leo. Vestibulum ut laoreet dui. Phasellus nec nunc imperdiet, mollis urna eget, interdum lacus. Nulla ac neque pulvinar ex vestibulum venenatis at sed mi. Aliquam faucibus risus eget dolor porttitor interdum. Phasellus rutrum augue ex, vel tempus velit sollicitudin vitae. Pellentesque libero sapien, ullamcorper nec elementum nec, pharetra sed nisl. Nullam egestas arcu et ex vulputate, pretium vestibulum odio convallis. Nam auctor risus nec fermentum ultricies.

Donec porttitor quis ipsum ut imperdiet. Fusce ac pretium felis, sit amet pharetra orci. Donec vitae quam ac tellus pellentesque fringilla. Curabitur placerat quam a leo imperdiet tincidunt. Nunc porta pulvinar orci sit amet varius. Suspendisse dapibus ipsum nec magna ultricies gravida. Maecenas varius justo ac sem rhoncus lobortis. Integer eget cursus diam. Vestibulum sollicitudin enim at metus scelerisque blandit. In sit amet pulvinar nunc. Sed sit amet rutrum ex, efficitur imperdiet nunc.

ContentRenderer

Now that we have the list of posts, we need to have something that will display the content when we click on the link. This is equivalent to the /src/routes/blog/_layout.svelte component in the last project. The place we'll start working with styling, etc, for this is in the pages/[...slug].vue component, which currently looks just like

<template>
  <main>
    <ContentDoc />
  </main>
</template>

Just as an example, if we go to http://localhost:3000/blog/foo-bar we'll see Copying the styling over from https://github.com/jvp-design/sveltekit-tailwind-mdsvex-blog/blob/main/src/routes/blog/_layout.svelte we get

<template>
  <main
    class="relative mx-auto max-w-prose overflow-hidden bg-white py-16 px-4 sm:px-6 lg:px-8"
  >
    <nuxt-link
      class="block cursor-pointer"
      href="/blog"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="inline h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M11 17l-5-5m0 0l5-5m-5 5h12"
        />
      </svg>
      Back
    </nuxt-link>
    <ContentDoc v-slot="{ doc }">
      <h2 class="my-4 text-4xl font-semibold">{{ doc.title }}</h2>
      <p class="my-4 text-gray-500">
        by, {{ doc.author }}, {{ convertDate(doc.date) }}
      </p>
      <div
        class="prose prose-lg first-letter:text-3xl first-letter:text-blue-600"
      >
        <ContentRenderer :value="doc" />
      </div>
    </ContentDoc>
  </main>
</template>

Again, we'll notice a few subtle differences

• The on:click directive in Svelte is replaced by @click in Vue
• Rendering the variables uses double-curly braces instead of single, like we've seen before
• We can get access to all of the individual document's attributes by wrapping the content in the built-in <ContentDoc> component, the documentation for which you can see here.

One thing I'll note, I still haven't been able to get the multiple slot functionality (i.e. the #not-found and #empty stuff) working. Any time I try including it I get the following error: In order to get this all to work, though, we'll need to add in one more bit of functionality, namely the convertDate method that is referenced in the template. Since this is not the only place we'll be using it, I'll create a utils folder at the root of the project and just create an index.ts file here to include this functionality.

// /utils/index.ts

export const convertDate = (published: string): string => {
    const months = {
        1: "Jan",
        2: "Feb",
        3: "Mar",
        4: "Apr",
        5: "May",
        6: "Jun",
        7: "Jul",
        8: "Aug",
        9: "Sep",
        10: "Oct",
        11: "Nov",
        12: "Dec",
    };
    const date = published.substring(0, 10);
    const [year, month, day] = date.split("-");
    return `${day}-${months[parseInt(month)]}-${year}`;
};

and we'll just import this method both into /pages/[...slug].vue as well as /pages/blog/index.vue as we'll use it there to convert the date format to a more readable one for the list view, as well. Since, as of this point, both of those components are stateless (they don't have a script tag yet) we can just add the following snippets to the top of each of the components as displayed below /pages/[...slug].vue

<script setup>
  import { convertDate } from '../utils'
</script>

/pages/blog/index.vue

<script setup>
  import { convertDate } from '../../utils'
</script>

After adding this to index.vue we'll also want to replace the <time datetime="2020-03-16">{{ article.date }}</time> with <time datetime="2020-03-16">{{ convertDate(article.date) }}</time>

Extras

At this point we're essentially done with the original "stuff" from the last post. The only things we need to add to match functionality are

• Sorting descending by date
• The ability to search by author
• A custom NewWindowUrl component

Sorting

We can see in (https://content.nuxtjs.org/api/components/content-list) that we can in theory pass in a queryContent attribute as a :query prop to query our blog posts. Unfortunately, when I add

const qc = await queryContent("blog").sort({author: 1}).find()

and remove the path="/blog" from the <ContentList declaration while adding :query="query" then nothing will change. I don't know if maybe I'm doing something incorrectly or if something is broken, but this doesn't work for me. So, it is at this point where I'll remove the <ContentList component, and instead just use a generic array of posts. To understand what I mean, take a look at the updated component:

<script setup>
import { convertDate } from "../../utils";

const qc = await queryContent("blog").sort({ author: 0 }).find();
</script>

<template>
  <main class="bg-white px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
    <div class="mx-auto max-w-lg lg:max-w-7xl">
      <div class="border-b border-b-gray-200 pb-6">
        <h2
          class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl"
        >
          Recent Posts
        </h2>
      </div>
      <div class="mt-12 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
        <div
          v-for="article in qc"
          :key="article._path"
          class="flex flex-col justify-between rounded-lg border border-gray-200 p-4"
        >
          <nuxt-link :href="article._path">
            <p class="text-xl text-gray-900">{{ article.title }}</p>
            <p class="mt-3 text-gray-500">{{ article.description }}</p>
          </nuxt-link>
          <div class="mt-6">
            <a
              :href="`?author=${article.author}`"
              class="text-sm font-medium text-gray-900"
            >
              {{ article.author }}
            </a>
            <div class="text-sm text-gray-500">
              <time datetime="2020-03-16">{{ convertDate(article.date) }}</time>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

This will sort the posts in ascending order by author, so foo-baz.md will appear first in the list. If we replace {author: 0} with {date: -1}, though, the sorting will work with the dates sorting in descending order. This works because of the way we've written the date field in each blog post. What if we don't want to have to use convertDate, though, and instead we just want the date to be the human-readable format? In that case we would not be able to sort on that because it wouldn't sort the string correctly. What we can do instead is add a numeric value to the beginning of each blog post title. For example, foo-bar.md becomes 1.foo-bar.md, hello-world.md becomes 2.hello-world.md, and foo-baz.md becomes 3.foo-baz.md (this numbering was chosen because of the chronological order). Nothing will change on the display order of the posts, but we can now add the following sorting parameter to the query:

const qc = await queryContent("blog").sort({ _file: -1, $numeric: true }).find();

and this will order the posts in the opposite order of the file names, which are increasing with the number at the beginning. Then, for any new post we create, which we will do in a few minutes with testing out the custom component functionality, we simply increase the number to the next one.

Fetching only posts by a specific author

As you can see, we already have a link associated with the author field in the list view. If you go to http://localhost:3000/?author=Jeff you will still get the entire list of posts. We simply need to add a filter to the queryContent that I set up in the previous section to handle filtering by author. First, we need to use the useRoute composable to get the "author" field from the query, if it exists. Then we just add a .where() clause to the query, and this should handle everything for us.

<script setup>
import { convertDate } from '../../utils'

const { query } = useRoute();
const { author } = query;

const qc = await queryContent("blog").where({author}).sort()
</script>

Now, if we go to http://localhost:3000/?author=Jeff we'll see

Custom component

In order to handle this we'll first create a /components/content directory at the root of the project. We don't need to create a new window URL component like I did in the last post because links external to your Nuxt Content blog will open in a new window regardless. Instead, we'll create hero and card components (these are pulled directly from the documentation). We'll create /components/content/Hero.vue and /components/content/Card.vue and set them up to look like

/components/content/Hero.vue

<template>
  <section>
    <h1 class="text-4xl"><slot /></h1>
    <slot name="description" />
  </section>
</template>

/components/content/Card.vue

<template>
  <div class="p-6 border bg-white dark:bg-black dark:border-gray-700 rounded">
    <slot />
  </div>
</template>

We can then use them in the newly created blog post, /content/blog/4.test-custom-component.md

---
title: Testing a Custom Component
author: Bob
date: 2022-06-03
---

Hi there! Check out my some custom components below!

::hero
:::card
A nested card
::card
A super nested card
::
:::
::

and we are left with

Conclusion

And there you have it, a very similar blog setup to what was done in the last post, but this time using Nuxt instead of SvelteKit and using Content v2 instead of MDsveX. Ultimately I think the route you go depends on the tech with which you're more familiar, but I will say that I am a huge fan of what they've done with Nuxt v3 and Content v2, which makes sense considering I spent the first 4 years of my professional life as a Vue developer. There will definitely be more content around Nuxt down the road but this is all for now.

This post can also be found on my main page at https://www.jvp.design/blog/building-a-blog-with-sveltekit-tailwind-mdsvex

For those who want to follow along in code, you can get it from https://github.com/jvp-design/sveltekit-tailwind-mdsvex-blog

A YouTube video accompanying this article has been uploaded. Check it out: https://youtu.be/-OSTAkjGVng

Intro

In the last blog post I described how to self-host a font in SvelteKit using Tailwind CSS. I then tried to do a live-stream in which I used the aforementioned functionality and extended it by installing MDsveX and setting it up. I left off the video with a very trimmed down blog sample and noted that I may add styling if people wanted it. In this post I will not only add in styling but will also include things like pagination and search.

Updates to the last blog post

There were a few things that I did in the video that need to be updated from the last blog post.

Different fonts

The first thing that is different from the blog post is the fonts that were used. In the last blog post I used Walkway and Lobster Two and in the blog post I used Uncut Sans and Sprat. As such, the app.css file should replace the @font-face elements and look like

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-serif;
    }
    @font-face {
        font-family: 'sprat';
        src: local('Sprat'), local('sprat'), url('/fonts/sprat/Sprat-Regular.otf');
        font-weight: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'sprat';
        src: local('Sprat'), local('sprat'), url('/fonts/sprat/Sprat-RegularMedium.otf');
        font-weight: 500;
        font-display: swap;
    }
    @font-face {
        font-family: 'sprat';
        src: local('Sprat'), local('sprat'), url('/fonts/sprat/Sprat-RegularBold.otf');
        font-weight: 600;
        font-display: swap;
    }

    @font-face {
        font-family: 'uncut-sans';
        src: local('Uncut-Sans'), local('Uncut Sans'), local('uncut-sans'), local('uncut sans'),
            url('/fonts/uncut-sans/Uncut-Sans-Regular.otf');
        font-weight: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'uncut-sans';
        src: local('Uncut-Sans'), local('Uncut Sans'), local('uncut-sans'), local('uncut sans'),
            url('/fonts/uncut-sans/Uncut-Sans-Medium.otf');
        font-weight: 500;
        font-display: swap;
    }
    @font-face {
        font-family: 'uncut-sans';
        src: local('Uncut-Sans'), local('Uncut Sans'), local('uncut-sans'), local('uncut sans'),
            url('/fonts/uncut-sans/Uncut-Sans-Semibold.otf');
        font-weight: 600;
        font-display: swap;
    }
}

Here I'm using a few more fonts and I've also set it up where any header tags will automatically use the Sprat font by default. Then the tailwind.config.js file should now look like this

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['uncut-sans', ...defaultTheme.fontFamily.sans],
                serif: ['sprat', ...defaultTheme.fontFamily.serif]
            }
        }
    },
    plugins: []
};

MDsveX

Installation

The next thing that needs to be done to approach where we were in the video is installing and setting up MDsveX. The first thing you need to do is install the package from npm

npm i -D mdsvex

Configuring

Then you'll need to create a file called mdsvex.config.js at the root of your project. I'll display the file in its entirety here and explain it below

import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import { fileURLToPath } from 'url';
import * as path from 'path';

const dirname = path.resolve(fileURLToPath(import.meta.url), '../');

const config = defineConfig({
    extensions: ['.md', '.svx'],
    smartypants: { dashes: 'oldschool' },
    layout: { blog: path.join(dirname, './src/routes/blog/_layout.svelte') }
});

export default config;

The dirname variable effectively converts the "current" location of the project in your own file-system. This value is then used to point directly to the layout we'll be using for blog posts, called "blog", in the file system of the project. So, we're telling MDsveX that any file we set up with the template named "blog" should use the _layout.svelte file that we'll be creating and saving in the ./src/routes/blog/ folder. The extensions entry in the config just tells MDsveX to look convert files with either the .md or .svx extension. Information about smartypants functionality can be found at https://mdsvex.pngwn.io/docs#smartypants.

Adding to SvelteKit Project

Now we need to tell our SvelteKit project to actually use this config that we've just set up. In svelte.config.js you'll need to add two things:

• extensions: ['.svelte', ...mdsvexConfig.extensions]
• mdsvex(mdsvexConfig) to the preprocess attribute

Your svelte.config.js file should now look like

import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import mdsvexConfig from './mdsvex.config.js';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    extensions: ['.svelte', ...mdsvexConfig.extensions],
    preprocess: [
        preprocess({
            postcss: true
        }),
        mdsvex(mdsvexConfig)
    ],
    kit: {
        adapter: adapter()
    }
};

export default config;

Adding a Blog Layout

Finally, we need to add the aforementioned _layout.svelte file to the /src/routes/blog folder. For now it will simply have a <slot /> element, but we'll add styling and functionality later.

Fetching Blog Posts

Sample Blog Posts

First, let's create a few very simple markdown files to act as blog posts:

/src/routes/blog/foo-bar.md

---
title: Foo Bar
author: Jeff
date: 2022-04-15
layout: blog
excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum odio nisl, nec pretium dolor varius in.
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum odio nisl, nec pretium dolor varius in. Quisque tincidunt egestas libero rhoncus blandit. Etiam elit leo, facilisis id magna sit amet, vestibulum finibus nulla. Vestibulum porttitor nisl id ligula accumsan, et dapibus justo cursus. Phasellus congue mauris vitae dictum auctor. Sed vitae mollis quam. Morbi venenatis metus ligula, sit amet consectetur eros pharetra vel.

Maecenas efficitur mauris eu ex viverra, ut consequat metus ultrices. Sed imperdiet leo odio, in aliquam orci sagittis ut. Vivamus eget sem et nibh faucibus luctus vel a enim. Sed orci tortor, semper ut vulputate at, hendrerit dapibus dolor. Pellentesque tincidunt tempor efficitur. Etiam efficitur pellentesque nisi, sit amet feugiat nisi. Maecenas nisl odio, viverra vitae rhoncus eu, placerat vitae ante. Quisque suscipit nibh lacus, sit amet facilisis tellus fermentum in. Integer nec lacinia risus, ut lobortis ex.

Integer nec ultricies nisi. Curabitur odio mauris, scelerisque at luctus a, bibendum eget velit. Vivamus id tellus lectus. Nulla in purus sit amet mi tincidunt commodo. Ut auctor ante a mauris dignissim laoreet. Nullam magna arcu, tincidunt nec risus et, mattis fringilla augue. Suspendisse imperdiet, purus vel pharetra bibendum, enim purus convallis quam, ut faucibus nibh libero in enim. Curabitur feugiat leo ac accumsan tempor. Ut non convallis mauris, sed rutrum libero.

Maecenas vehicula maximus justo, pellentesque consequat sem dignissim a. Proin quis lectus molestie, pellentesque massa in, egestas orci. Vestibulum facilisis enim at magna scelerisque, quis suscipit quam ultrices. Proin a rutrum tortor. Proin vel scelerisque nunc. Nullam condimentum sit amet magna eu rutrum. Quisque magna enim, aliquet ut blandit et, viverra eu leo. Sed molestie sem et quam consequat mattis. Donec elit velit, cursus at ipsum nec, ullamcorper tincidunt neque.

Nunc convallis odio justo, non interdum dolor ultricies interdum. Curabitur accumsan sem a iaculis placerat. Donec eu facilisis sem, vel bibendum risus. Aliquam non tincidunt est, a auctor magna. Ut erat libero, commodo non malesuada quis, porttitor sit amet libero. Curabitur pulvinar ornare leo id efficitur. Donec sollicitudin arcu venenatis odio elementum, at venenatis erat efficitur. In porta mi et sollicitudin faucibus. Vivamus vel metus interdum, facilisis nisl at, ullamcorper mauris. Sed ac nisl at dolor varius aliquam. In facilisis pretium interdum. Sed tempus purus at pulvinar scelerisque. Etiam eu purus eleifend, commodo turpis eget, aliquet turpis. Mauris fermentum magna dictum lorem bibendum tempor.

/src/routes/blog/foo-baz.md

---
title: Foo Baz
author: Jeff
date: 2022-07-15
layout: blog
excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum odio nisl, nec pretium dolor varius in.
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum odio nisl, nec pretium dolor varius in. Quisque tincidunt egestas libero rhoncus blandit. Etiam elit leo, facilisis id magna sit amet, vestibulum finibus nulla. Vestibulum porttitor nisl id ligula accumsan, et dapibus justo cursus. Phasellus congue mauris vitae dictum auctor. Sed vitae mollis quam. Morbi venenatis metus ligula, sit amet consectetur eros pharetra vel.

Maecenas efficitur mauris eu ex viverra, ut consequat metus ultrices. Sed imperdiet leo odio, in aliquam orci sagittis ut. Vivamus eget sem et nibh faucibus luctus vel a enim. Sed orci tortor, semper ut vulputate at, hendrerit dapibus dolor. Pellentesque tincidunt tempor efficitur. Etiam efficitur pellentesque nisi, sit amet feugiat nisi. Maecenas nisl odio, viverra vitae rhoncus eu, placerat vitae ante. Quisque suscipit nibh lacus, sit amet facilisis tellus fermentum in. Integer nec lacinia risus, ut lobortis ex.

Integer nec ultricies nisi. Curabitur odio mauris, scelerisque at luctus a, bibendum eget velit. Vivamus id tellus lectus. Nulla in purus sit amet mi tincidunt commodo. Ut auctor ante a mauris dignissim laoreet. Nullam magna arcu, tincidunt nec risus et, mattis fringilla augue. Suspendisse imperdiet, purus vel pharetra bibendum, enim purus convallis quam, ut faucibus nibh libero in enim. Curabitur feugiat leo ac accumsan tempor. Ut non convallis mauris, sed rutrum libero.

Maecenas vehicula maximus justo, pellentesque consequat sem dignissim a. Proin quis lectus molestie, pellentesque massa in, egestas orci. Vestibulum facilisis enim at magna scelerisque, quis suscipit quam ultrices. Proin a rutrum tortor. Proin vel scelerisque nunc. Nullam condimentum sit amet magna eu rutrum. Quisque magna enim, aliquet ut blandit et, viverra eu leo. Sed molestie sem et quam consequat mattis. Donec elit velit, cursus at ipsum nec, ullamcorper tincidunt neque.

Nunc convallis odio justo, non interdum dolor ultricies interdum. Curabitur accumsan sem a iaculis placerat. Donec eu facilisis sem, vel bibendum risus. Aliquam non tincidunt est, a auctor magna. Ut erat libero, commodo non malesuada quis, porttitor sit amet libero. Curabitur pulvinar ornare leo id efficitur. Donec sollicitudin arcu venenatis odio elementum, at venenatis erat efficitur. In porta mi et sollicitudin faucibus. Vivamus vel metus interdum, facilisis nisl at, ullamcorper mauris. Sed ac nisl at dolor varius aliquam. In facilisis pretium interdum. Sed tempus purus at pulvinar scelerisque. Etiam eu purus eleifend, commodo turpis eget, aliquet turpis. Mauris fermentum magna dictum lorem bibendum tempor.

/src/routes/blog/hello-world.md

---
title: Hello World
author: Jeff
date: 2022-05-27
layout: blog
excerpt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget massa sit amet arcu varius lacinia nec quis lacus.
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget massa sit amet arcu varius lacinia nec quis lacus. Proin auctor lectus a volutpat porta. Nullam eget ipsum convallis, elementum orci sodales, blandit velit. In imperdiet, ligula sed ultricies pharetra, metus mi consequat dui, vitae luctus dolor ligula eu nunc. Fusce consequat mauris ac egestas iaculis. Quisque pharetra et ante maximus convallis. Nulla sollicitudin velit molestie mauris dignissim, at hendrerit diam fringilla. Donec mollis eget ex non iaculis. In a vehicula nisl. Donec dapibus orci in enim posuere, non rhoncus risus ultrices. Pellentesque elementum metus ipsum, ut scelerisque mauris ultrices vel.

Aliquam ullamcorper est vehicula, suscipit nulla pellentesque, convallis odio. Praesent eget elit eget magna fringilla pharetra tempor quis magna. Proin et est vestibulum neque rhoncus mattis non vel lacus. Proin vulputate risus vel dignissim vestibulum. Quisque id sollicitudin neque, sed sagittis urna. Vestibulum vehicula metus sed eros venenatis, sit amet facilisis nunc porta. Nam pharetra luctus sapien, ut venenatis nibh tincidunt mollis. Phasellus efficitur, felis vitae mattis cursus, sapien diam vulputate dui, sit amet pulvinar ante ipsum non urna.

Fusce est nulla, efficitur vitae turpis eget, pretium rutrum turpis. Fusce at lectus eros. Phasellus convallis condimentum dolor ac rutrum. Integer commodo augue et dui efficitur tincidunt. Nam scelerisque egestas quam, vitae ultrices turpis tincidunt rhoncus. Duis rutrum placerat erat. Ut ac tincidunt elit. In laoreet dictum mauris nec posuere. Curabitur tempus, dolor malesuada ultrices feugiat, ipsum eros faucibus tellus, eu ultricies nunc est sed dolor. Suspendisse nisi eros, vehicula vitae iaculis sit amet, aliquet sit amet leo. Sed euismod urna at eros posuere laoreet. Curabitur in sodales lorem. Nulla rutrum aliquam felis ac tempor.

Ut pretium vitae elit ac facilisis. Aliquam nisi tortor, feugiat at lacus sed, condimentum egestas urna. Vestibulum hendrerit augue non urna volutpat, et fermentum tortor pellentesque. Aenean eget pharetra leo. Vestibulum ut laoreet dui. Phasellus nec nunc imperdiet, mollis urna eget, interdum lacus. Nulla ac neque pulvinar ex vestibulum venenatis at sed mi. Aliquam faucibus risus eget dolor porttitor interdum. Phasellus rutrum augue ex, vel tempus velit sollicitudin vitae. Pellentesque libero sapien, ullamcorper nec elementum nec, pharetra sed nisl. Nullam egestas arcu et ex vulputate, pretium vestibulum odio convallis. Nam auctor risus nec fermentum ultricies.

Donec porttitor quis ipsum ut imperdiet. Fusce ac pretium felis, sit amet pharetra orci. Donec vitae quam ac tellus pellentesque fringilla. Curabitur placerat quam a leo imperdiet tincidunt. Nunc porta pulvinar orci sit amet varius. Suspendisse dapibus ipsum nec magna ultricies gravida. Maecenas varius justo ac sem rhoncus lobortis. Integer eget cursus diam. Vestibulum sollicitudin enim at metus scelerisque blandit. In sit amet pulvinar nunc. Sed sit amet rutrum ex, efficitur imperdiet nunc.

Fetch the Blog Posts for Svelte

The way the latest version of SvelteKit works is that you no longer need to use <script context="module"> and export an async load function, etc. We can very simply grab all the posts and return them as a body element from a JavaScript file, and then use the same key as a prop in the Svelte component. Before we can parse the files I want to introduce a simple function to convert a raw UTC date to a more human-friendly date time. This is fairly straightforward and I just include it here for reference.

// /src/lib/utils.js

export const convertDate = (published) => {
    const months = {
        1: 'Jan',
        2: 'Feb',
        3: 'Mar',
        4: 'Apr',
        5: 'May',
        6: 'Jun',
        7: 'Jul',
        8: 'Aug',
        9: 'Sep',
        10: 'Oct',
        11: 'Nov',
        12: 'Dec'
    };
    const date = published.substring(0, 10);
    const [year, month, day] = date.split('-');
    return `${day}-${months[parseInt(month)]}-${year}`;
};

We then use this function in the next file.

// /src/routes/blog/index.js
import { convertDate } from '$lib/utils';

export async function get() {
    const allPostFiles = import.meta.globEager('./*.{svx,md}');
    const allPosts = Object.entries(allPostFiles).map(([path, post]) => {
        const postPath = path.slice(2, -3);
        return { ...post.metadata, path: postPath, published: convertDate(post.metadata.date) };
    });
    const posts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
    if (!posts.length) {
        return { status: 404 };
    }
    return { body: { posts } };
}

The first line fetches all files that are in /src/routes/blog that end with either an .svx or .md extension. The resulting allPostFiles is somewhat nonsensical for our purposes and looks like

What we can do, though, is cycle through each entry, and fetch the post path (the slice takes off the beginning ./ characters and ending .md characters) and grabs any metadata created by MDsveX. The metadata created by MDsveX is all the content in between the --- characters, also called "front matter" in the markdown file. We then simply sort the files descending by date (i.e. most recent first) and if there are no posts then we simply return a 404 error, otherwise we return the posts as the body of the response, with the key of posts.

Create "List View"

We now need to create a file where we can view all the available blog posts. This file name needs to match the base (without the extension) of the JavaScript file we just created. Thus, we will create a /src/routes/blog/index.svelte file and add render the posts.

<script>
    export let posts;
</script>

<ul>
    {#each posts as post}
        <li>
            <a href="/blog/{post.path}" sveltekit:prefetch>{post.title}</a>
        </li>
    {/each}
</ul>

and if we navigate to http://localhost:3000/blog/ we should then see

New "Stuff"

Now that we've essentially gotten up-to-date relative to the last video, let's start styling things.

Blog List View

The first thing to do is remove the grid layout from the main /src/routes/__layout.svelte file because I want to be able to set the layout in the individual page. Now __layout.svelte looks like

<script>
    import '../styles/app.css';
</script>

<div class="h-screen">
    <slot />
</div>

Now we can update /src/routes/blog/index.svelte with a bit more pleasing styling

<script>
    export let posts;
</script>

<div class="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
    <div class="max-w-lg mx-auto lg:max-w-7xl">
        <div class="border-b border-b-gray-200 pb-6">
            <h2 class="text-3xl tracking-tight font-semibold text-gray-900 sm:text-4xl">Recent Posts</h2>
        </div>
        <div class="mt-12 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
            {#each posts as post}
                <div class="border border-gray-200 p-4 rounded-lg flex flex-col justify-between">
                    <a href="/blog/{post.path}" sveltekit:prefetch>
                        <p class="text-xl text-gray-900">{post.title}</p>
                        <p class="mt-3 text-gray-500">{post.excerpt}</p>
                    </a>
                    <div class="mt-6">
                        <p class="text-sm font-medium text-gray-900">
                            {post.author}
                        </p>
                        <div class="text-sm text-gray-500">
                            <time datetime="2020-03-16">{post.published}</time>
                        </div>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</div>

There is a lot to work through in all of the classes above and I encourage you to go to the Tailwind website to explore what each thing is doing, but you can see what the resulting image looks like here

Blog "Detail View"

We now want to update the styling for each blog post. The first thing we need to do is install another dependency because we'll be using some built-in Tailwind functionality. We can install the typography package by typing

npm i -D @tailwindcss/typography

and we then add this as a plugin in tailwind.config.js

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['uncut-sans', ...defaultTheme.fontFamily.sans],
                serif: ['sprat', ...defaultTheme.fontFamily.serif]
            }
        }
    },
    plugins: [require('@tailwindcss/typography')]
};

Update /src/routes/blog/_layout.svelte

Now that we actually have some blog posts we'll need to update our blog _layout.svelte file to be able to consume them. The first thing we're going to need to do is expose the props that we'll want to use in the post content, namely

• title
• author
• date

and we'll also need to import convertDate to make a "pretty" date on the post. The script section of /src/routes/blog/_layout.svelte will then look like

<script>
    import {convertDate} from '$lib/utils.js'; export let title; export let author; export let date;
</script>

Then we'll set certain display characteristics on the main content, such as centering, setting max widths, etc

<div class="relative mx-auto max-w-prose overflow-hidden bg-white py-16 px-4 sm:px-6 lg:px-8"></div>

We then add a back button to go to the previous page, and for this we'll also directly use the svg code from Heroicons for arrow-left.

<span
    class="block cursor-pointer"
    on:click={() => {
        history.back();
    }}
>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        class="inline h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
    >
        <path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
    </svg>
    Back
</span>

Finally we'll add a bit of simple styling for the title, author/date combination, and the main content

<h2 class="my-4 text-4xl font-semibold">{title}</h2>
<p class="my-4 text-gray-500">by {author}, {convertDate(date)}</p>
<div class="prose prose-lg first-letter:text-3xl first-letter:text-blue-600">
    <slot />
</div>

Thus, now the whole _layout.svelte component looks like

<script>
    import { convertDate } from '$lib/utils.js';

    export let title;
    export let author;
    export let date;
</script>

<div class="relative mx-auto max-w-prose overflow-hidden bg-white py-16 px-4 sm:px-6 lg:px-8">
    <span
        class="block cursor-pointer"
        on:click={() => {
            history.back();
        }}
    >
        <svg
            xmlns="http://www.w3.org/2000/svg"
            class="inline h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
        >
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
        </svg>
        Back
    </span>
    <h2 class="my-4 text-4xl font-semibold">{title}</h2>
    <p class="my-4 text-gray-500">by {author}, {convertDate(date)}</p>
    <div class="prose prose-lg first-letter:text-3xl first-letter:text-blue-600">
        <slot />
    </div>
</div>

and if we visit http://localhost:3000/blog/foo-baz then we're greeted by the following image

Extra Functionality

There are two main things that can be helpful in what we're doing

• Search
• Custom Svelte components in markdown

Search

To demonstrate this functionality we will do a search by author. So, go ahead and change the author of any of the already existing blog posts (I'll be doing this on foo-baz.md) to any other name (I'm using "Alice"). Next we need to go into /src/routes/blog/index.js and look for this search functionality. The first step is to add an argument called {url} to the main get function. Now the function signature looks like export async function get({ url }) {

We can next add in a filter to check the author, if one is passed in from the url argument.

import { convertDate } from '$lib/utils.js';

export async function get({ url }) {
    const allPostFiles = import.meta.globEager('./*.{svx,md}');
    const allPosts = Object.entries(allPostFiles).map(([path, post]) => {
        const postPath = path.slice(2, -3);
        return { ...post.metadata, path: postPath, published: convertDate(post.metadata.date) };
    });
    // New Code Starts Here
    const authorPosts = allPosts.filter((post) => {
        const author = url.searchParams.get('author');
        if (!author) return true;
        return post.author === author;
    });
    const posts = authorPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
    // New Code Ends Here
    if (!posts.length) {
        return { status: 404 };
    }
    return { body: { posts } };
}

In the last line of the "New Code" block, I've simply replaced the array on which I'm sorting from allPosts to authorPosts. The way this works is that if there is no author parameter included in the search then just return all posts, otherwise only return posts where the author matches the author term queried for.

Next we need to add functionality where a user can search by author from the main blog list view. This is done very simply in that we just need to replace the p tag that displays the author name in /src/routes/blog/index.svelte with an a tag and set the href attribute to be ?author={post.author}. The updated component looks like

<script>
    export let posts;
</script>

<div class="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
    <div class="max-w-lg mx-auto lg:max-w-7xl">
        <div class="border-b border-b-gray-200 pb-6">
            <h2 class="text-3xl tracking-tight font-semibold text-gray-900 sm:text-4xl">Recent Posts</h2>
        </div>
        <div class="mt-12 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
            {#each posts as post}
                <div class="border border-gray-200 p-4 rounded-lg">
                    <a href="/blog/{post.path}" sveltekit:prefetch>
                        <p class="text-xl text-gray-900">{post.title}</p>
                        <p class="mt-3 text-gray-500">{post.excerpt}</p>
                    </a>
                    <div class="mt-6">
                        <a href="?author={post.author}" class="text-sm font-medium text-gray-900">
                            {post.author}
                        </a>
                        <div class="text-sm text-gray-500">
                            <time datetime="2020-03-16">{post.published}</time>
                        </div>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</div>

This functionality can be extended to any number of search parameters as well as things like pagination, but that will be handled another time.

Custom Svelte Components

One problem that I had when I tried using "simple" CMSes was that any time I wanted to include a URL it would open in the current page. This defeats one of the goals of a blog as it pertains to SEO: the amount of time spent on your site. Thus, ultimately, it would be beneficial to be able to have a way to tell SvelteKit to open URLs in a new page. We can do this by creating a custom Svelte component that we can use in our markdown files.

NewWindowUrl Component

This will be a fairly simple component in that all we need it to render is a pre-defined url with a description and have the target="_blank" attribute on it.

<script>
    // /src/lib/blog-components/NewWindowUrl.svelte

    export let url;
    export let description;

    if (!description) {
        description = url
    }
</script>

<a href={url} target="_blank">{description}</a>

Now we can use this in one of our blog posts (markdown files). Let's add a link to the root route of my site, but have it open in a new page. We'll create a new blog post: /src/routes/blog/test-custom-url.md

---
title: Testing a Custom URL Component
author: Bob
date: 2022-06-03
layout: blog
excerpt: Blah Blah testing a simple custom URL component
---

<script>
import NewWindowUrl from '$lib/blog-components/NewWindowUrl.svelte'
</script>

Hi there! Go ahead and give my <NewWindowUrl url="https://www.jvp.design" description="main site" /> a visit!

Then if we visit http://localhost:3000/blog/test-custom-url and click on the link it should open my main site on a new page.

We can use this for any number of things. For example, for the blog posts for this site I have a custom component to handle different image formats (.webp and .png) which use the picture tag with a source tag for each item in an image's srcset group. Maybe that can be another (shorter) blog post.

A few months ago I wrote a post where I described how to self-host a font in SvelteKit. In that post I noted that it seemed that .ttf font files weren't being properly recognized and that you would need to convert to .woff files. Well, I don't know if I was just doing something wrong (most likely) or it was a function of Tailwind v3 being officially released or maybe an updated version of SvelteKit (both less likely), but there is an easier way to do this.

A quick thanks

First things first, I want to thank Dan for the comment on my other post, which caused me to come back and look at it again. The method in the previous post very well may have worked but it was going to be a pain in the butt to have to always go and convert the files when .tff files are so much more widely available.

A note to site builders

If you're using SvelteKit the reason is likely because you care about performance. I wrote a bit about the benefits of custom sites over no-code or low-code builders on my other blog (https://www.jvp.design/blog/the-importance-of-a-web-presence-in-2022) but one thing I will mention is that if you're linking to Google Fonts in your site it will slow down the page load and will hurt performance. If getting that famed 💯 on the pagespeed/lighthouse performance metric is a goal then you need to self-host. That's not to say that if you don't self-host then the performance is going to be bad, but this is a very quick and easy way to squeeze just a bit more performance out of your site.

The process

I'm going to go in just a little more detail here than I did before. Here's what I'll do

• Set up a new SvelteKit app
• Install Tailwind v3
• Download a specific font
• Show how to use said font on your site

Setting up a new SvelteKit app

This is the easy part. You can follow along with two very simple descriptions; the one on SvelteKit's site or the one specific to SvelteKit on Tailwind's site. I'm going to stick with the former and then go over to Tailwind for part 2.

In case you don't want to go to another site (I know, why not just stay here???), you simply need to run npm init svelte my-app and select "Skeleton project" and then choose whatever options you want. For the purposes of this project I'm not using any type checking nor am I including linting, prettier, or playwright. Then you type

cd my-app
npm i
npm run dev -- --open

and you should have a running SvelteKit app that looks something like this

Installing Tailwind

As previously mentioned, we can go to Tailwind's site and skip to part 2 of the description. If you don't want to go there and just want to follow here, this is what you do.

Install dependencies

You'll need to install tailwind itself, as well as a couple of other dependencies.

npm i -D tailwindcss postcss autoprefixer svelte-preprocess
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

Update svelte.config.js

Then you'll need to open the svelte.config.js file and change it from this

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;

to this

import adapter from '@sveltejs/adapter-auto';
import { preprocess } from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        preprocess({ postcss: true })
    ],
    kit: {
        adapter: adapter()
    }
};

export default config;

Update tailwind.config.cjs

Then open tailwind.config.cjs and add './src/**/*.{html,js,svelte,ts}' to the content field. It should look like this

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Set up CSS file

Next you'll want to create a file called app.css (or whatever you want to name it) and save it wherever you want. I tend to save it in ./src/styles/app.css but you can save it anywhere. Then you'll want to add the "big 3" tailwind directives to this file.

// app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import app.css into your layout

Finally, create a __layout.svelte file in the ./src/routes directory and import this newly-created css file.

<script>
  import "../styles/app.css";
</script>

<slot />

remember where you saved your css file and replace what I've written as the file path with whatever you've chosen. Now your app should look like this In order to make it a little more pleasing, let's open the ./src/routes/index.svelte file and add a bit of styling. We'll wrap both elements in a div so we can center the elements and add some basic text styling to both individual elements

<div class="h-screen grid place-content-center bg-gray-300">
    <h1 class="text-5xl text-blue-600">Welcome to SvelteKit</h1>
    <p class="text-xl text-red-500">Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
</div>

The app now looks like which is not great, but it's a little more visually appealing.

Using custom fonts

Download

I'm going to try this with two separate fonts: Walkway and Lobster Two. One is a .ttf file format and the other is .otf. I've created a new folder within the top-level static folder called "fonts" and have saved both .zip files there and subsequently extracted them there. Now the file structure should look a bit like

Configure font-face in CSS file

Now that we have the font files downloaded, we need to add the font face rules for the ones we want to use. Open up ./src/styles/app.css and add the following:

@layer base {
    @font-face {
        font-family: 'Lobster Two';
        src: local('Lobster Two'), local('Lobster-Two'), local('lobster two'), local('lobster-two'),
            url('/fonts/lobster-two/LobsterTwo-Regular.otf');
        font-weight: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Lobster Two';
        src: local('Lobster Two Bold'), local('Lobster-Two-Bold'), local('lobster two bold'),
            local('lobster-two-bold'), url('/fonts/lobster-two/LobsterTwo-Bold.otf');
        font-weight: bold;
        font-display: swap;
    }
    @font-face {
        font-family: 'Walkway';
        src: local('Walkway'), local('walkway'), url('/fonts/Walkway/Walkway_Bold.ttf');
        font-weight: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Walkway';
        src: local('Walkway'), local('walkway'), url('/fonts/Walkway/Walkway_Black.ttf');
        font-weight: bold;
        font-display: swap;
    }
}

A few things to discuss:

• @layer base is the simplest way to incorporate these. For a bit more detail visit this site: https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
• I've added a bunch of possible spellings of the font names just in case the user already has them saved locally on their machine. I tend to like to replace spaces with hyphens and include title and lower case.
• I've added in bold and normal font weights, but you can add in whatever you need. For example, if you want to add a semi bold style to Walkway you can directly set the font-weight property to be whichever numeric value would work (for semibold it's 600).

  Add font families to tailwind.config.cjs

  Now that we've added them to the CSS, we need to indicate to Tailwind what we want to call them. For example, if you want to change the style of a specific line of text you can use the Tailwind class font-<font-name> where <font-name> is whatever you're calling it. You'll see what I mean in a minute.

In tailwind.config.cjs we're going to modify the extend property like so:

theme: {
  extend: {
    fontFamily: {
      walkway: ['Walkway'],
      lobster: ['Lobster Two']
    }
  }
}

The values inside the array are the values that we set in the font-family lines inside the CSS file. If, in app.css we had replaced Lobster Two with just Lobster then we would also have to change that in tailwind.config.cjs.

Style our app

Now that we've downloaded, installed, and declared our fonts the only thing left to do is to use them in the app itself. Open up ./src/routes/index.svelte and use the fonts as you see fit. I've chosen to use font-walkway on the h1 and font-lobster font-bold on the p tag. The code looks like this

<div class="h-screen grid place-content-center bg-gray-300">
  <h1 class="text-5xl text-blue-600 font-walkway">Welcome to SvelteKit</h1>
  <p class="text-xl text-red-500 font-lobster font-bold">Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
</div>

and the resulting app looks like this

Conclusion

There you have it, a very simple way to include not only .ttf files but also .otf files in your SvelteKit app. This may have seemed like a somewhat long process, but once you do it once or twice you get the hang of it and, like I said, it's a quick and easy way to add a small performance boost to the site you're working on, which is likely the reason you're using SvelteKit for your app instead of something like Next or Remix.

Why I Built It

Backstory

I'm a fairly large man. I'm 6'3" (1.9m) and I've always been fairly muscular/athletic/husky depending on the stage in my life. As a point of reference, when I got on the scale for football weigh-ins in 8th grade I was 6'0" and 196 pounds. By the time I was a freshman in high school (14 years old) I was 6'3" and 240 pounds and for the next 10 years or so my weight would fluctuate up or down. There were times I was up to 250-260 and then when I was 19 I had an aversion to eating (I'm not going to disrespect people suffering from actual eating disorders to compare what I had with their struggle) and got down to 196. I know the CDC indicates that 148-199 is healthy for someone my height, but I can easily tell you that 196 was not a healthy weight for me. The sweet spot should be anywhere from 210-235 for me.

I met my wife in June 2005 (I actually know the exact day), and I was ~240 at the time, which felt like a decent weight, but after a few years of being together I started to put on pounds. My wife has always been a very good cook and for a while I had trouble with willpower and portion control. When we got married in 2008 I was pushing 275-280, and by the time I went to study in England for a spell while in grad school in 2012, I was up to 300 pounds.

The Revelation

While I was in England I walked everywhere. I obviously didn't have a car and the walk was fairly pleasant through much of Oxford and down Cornmarket St, and it ended up being about 2 miles each way. When you combine going to get lunch and such, I generally walked 4.5-5 miles each day. I still hadn't had any revelations about eating healthy or anything like that, so I would have sandwiches for lunch every day, pasta for dinner, cookies after, and other fun stuff. The thing was, though, because I was walking everywhere I ended up losing 25 pounds in about 7 weeks.

When I got back I wanted to try to do something similar so I got a bike to ride outside, I tried exercise programs like P90X and Insanity but none of it worked because I was still eating whatever I wanted thinking that I could replace 5 miles of walking every day with 30-45 minutes of cardio workouts. Side note, is it just me or is anyone else bothered that in the older versions of Insanity that Shaun T's beard is uneven on the sides of his face?

It wasn't until July 2012 when I saw Charles Barkley selling Weight Watchers for men that I realized I probably needed to modify my eating habits, as well. So I signed up for Weight Watchers and started doing DDP Yoga, although it was called YRG back then. The driver for using DDP Yoga was two-fold: the workouts were shorter than P90X, and the intensity on my joints was lower than something like Insanity. This video also didn't hurt with the motivation

I was using their Points Plus program, and from July 2012 to February 2013 I went from ~275 pounds all the way down to 195 pounds. I had finally found something that worked.

The Switch

I figured that 195 was a good weight at the time, although as I mentioned before it really wasn't, and I figured I'd be okay to go into maintenance mode. This worked great for me, I was chugging right along maintaining a healthy weight for a while, and then out of the blue one day, my points changed. Weight Watchers, without any warning, had decided to do away with Points Plus and switch everyone over to what they called SmartPoints.

I understood the motivation for them to do it, but it didn't help me. I had success with the old system, and my breakfast which amounted to 11 points on the old system was now 15. Combine that with the fact that my daily allowance of points dropped ~10 points or so and this was a no go for me. Luckily I found a couple of sites online that had published unofficial formulas for all things points plus, so I put together a handy spreadsheet so I could track on my own. I did this on and off for years, with my weight hovering in the range of 210-230 in general.

The Pandemic

Just prior to the pandemic, in December 2019, we purchased a fairly well-known exercise bike whose name starts with "P" (not naming since they seemingly have trademarked the word as it refers to exercise equipment) and it was a fun and very convenient way to get some easy exercise in. As the pandemic set in I stopped tracking what I was eating as much, as many people did, but because we had the bike it didn't matter as much; the amount of effort I put in on the bike generally offset what I was eating.

I would unofficially track food in my makeshift spreadsheet off and on for a while, but it wasn't until late 2021 that I noticed that the macro I had coded in Excel wasn't actually calculating correctly in the spreadsheet. The formula was correct but for some reason when the foods were being included in recipes the formula was somehow breaking. Since I was removing Excel from my computer and migrating to cloud spreadsheets (that don't natively support macros) and I wanted to add a site to my portfolio, I figured I'd build the site myself.

Building the Site

First Steps

The plan was to try to build this quickly but to also learn some new tech. Furthermore, I initially was considering using a relational database but trying to figure out how to relate foods and recipes with actual instances of foods and recipes as well as including them all in meals seemed nonsensical. So, at first I tried building the backend in FastAPI using a NoSQL database. I used Beanie and FastAPI Users for general scaffolding with a Mongo database. The plan was to then build the frontend in either React or (preferentially) Vue.

Indexing Problems

This all worked generally well until I got to the point where I realized I was going to want to search for foods by name, as well as include partial searches. For example, if you want to search for "mayo" it should return all items that include those 4 letters, case-insensitive. The main problem that ended up happening was trying to set up an index in Beanie. It's possible, I'm sure, but as I was messing around with it I started to get frustrated and was already realizing that I didn't want to have to worry about handling authentication tokens, hook in routing, and deal with all of the complicated stuff that can go into building a decoupled frontend and backend.

Django to the Rescue

Ultimately I came to the conclusion that for something as simple, from a user perspective, as I wanted to build there was no need to over-complicate the situation. Vue, Svelte, React, et al. are great tools for building web applications, but the site I was building was effectively meant to be what websites used to be 10-20 years ago: a simple set of documents with embedded forms. There was very little interactivity that was needed, so Django's highly opinionated nature lended itself to extremely fast development.

Without getting into too much detail, since I had spent a lot of time building custom functionality in Python already when I was building it in FastAPI (for example, converting from volumetric units to weight/mass units) I was able to get the bulk of the site up and running in less than a month in my spare time. There was a lot of minutiae that needed to be addressed, but thanks to Render getting the site and database deployed was very simple. It can be found at https://www.weightpoints.plus for anyone who wants to try it out.

Progress

I started actually tracking my weight on 17-March-2022 and I weighed in at 231.1 pounds. My weigh-in day is Thursday, so as of 4 days ago I was already down to 225.8 pounds. It turns out when you get good cardio in every day and you watch what you eat it can have a decent effect on weight loss. I've been eating a lot more fruit and a lot less candy/cookies/chocolate. I would venture to say that maybe I'm eating too much fruit, but I have a sweet tooth and this helps.

I'll be moving my blog over to my own site at some point in the near future (and I'll be recording a video about setting up a blog in SvelteKit and a headless CMS) and I'm planning on blogging a bit more about my progress going forward. There will be content related to weight loss as well as my exercise routine, but discussion about that will be in a subsequent post.

You see, I have two kids, 8 and 5, and a full-time job. I have other responsibilities as well, but here's what my day looks like on a regular basis:

• 6:45 AM: wake up and get the kids up for school
• 7:00 AM: make breakfast, coffee, get lunches ready, try to unload the dishwasher, get the kids ready for school (my wife does this last part)
• 7:45 AM: drive the kids to school
  • Thankfully since January they've been going to the same school. What was a 1.25-hour commute is now down to ~45 minutes
• 9:00 AM: get to work
• 11:30 AM: lunch
• 12:00 PM: stand-up
• 12:30 PM: back to work
• 4:30 PM: break for a bit to exercise
• 5:30 PM: kids are home, homework, start prepping dinner
• 6:30 PM - 8:30 PM: dinner (this fluctuates between these hours depending on how late exercise happened, spending time actually talking to my wife, etc.)
• 8:30 PM - 9:00 PM: get the kids ready for bed
• 9:30 PM: dishes, work for a bit longer
• 10:30 PM - 11:30 PM: shower and bed

As a note, I tend to not have too many meetings on a daily basis, which is a change from my last job. There are some odd days when I do have to have ad hoc calls with team members, or where there's a grooming session or sprint planning/review, but those aren't every day.

The thing is, this is a normal day. By no means am I complaining because there are myriad things for which I'm very fortunate. The point of mentioning this, as I write this by "candlelight" in the wee hours of Saturday morning, is that I have no clue how some content creators have the time to create content to the extent that they have. I would love ❤️ to be able to blog, come up with witty tweets, create YouTube tutorials, and all of that other good stuff. But the thing is, what I really enjoy doing is building actual websites.

And therein lies the point of this post. I've managed to take some spare time, what little I have, to build a site and start recording some content for YouTube, and I'm planning on trying to do more in the coming weeks and months. I'll share a little more about the actual plans soon, because otherwise this would end up being a novel, but I have a few things that I'm going to be touching on in the very near future. Check back in the next few days for the first update.

That said, I did run into a weird little hiccup earlier today and I thought I'd share what I ended up doing. I have a view that lists out all foods that are either system foods or user-created foods, but as I have a fairly large database of foods to begin with, since I had kept this in a spreadsheet before and I scraped all of the restaurant foods from http://www.exercise4weightloss.com/weight-watchers-points.html, it amounted to a list of just shy of 50,000 foods so I clearly needed to add pagination.

Pagination

This is easy to do in Django if you're using a ListView in that you only need to add one line to your class-based view

# food/views.py

from django.db.models import QuerySet, Q
from django.views.generic import ListView

from .models import Food

class FoodListView(ListView):
    model = Food
    paginate_by = 20

    def get_queryset(self) -> QuerySet[Food]:
        self.queryset = Food.objects.filter(
            Q(user_created=False) | Q(user=self.request.user)
        )
        return super().get_queryset()

The get_queryset method is to set it to return all system foods and the foods created by the logged in user.

Then you simply need to update your template to include pagination as described in https://docs.djangoproject.com/en/4.0/topics/pagination/#paginating-a-listview

{# food_list.html #}

{% extends 'base.html' %}

{% block content %}
  <ul>
    {% for food in food_list %}
      <li>{{ food }}</li>
    {% endfor %}
  </ul>


  <div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
          <a href="?page=1">&laquo; first</a>
          <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

      <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>

      {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}">next</a>
        <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
      {% endif %}
    </span>
  </div>
{% endblock content %}

Filtering

If you want to include filtering, though, and you don't want to manually handle it, this can create a problem.

Replacing Generic ListView

The first thing you would need to do is install django-filter. Then after that you can simply create a filter and replace your ListView with a FilterView

# food/views.py

import django_filters
from django.db.models import QuerySet, Q
from django_filters.views import FilterView

from .models import Food

class FoodFilter(django_filters.FilterSet):
    name = django_filters.CharFilter(lookup_expr="icontains")

    class Meta:
        model = Food
        fields = ["name"]

class FoodListView(FilterView):
    model = Food
    paginate_by = 20
    filterset_class = FoodFilter
    template_name_suffix = "_list"

    def get_queryset(self) -> QuerySet[Food]:
        self.queryset = Food.objects.filter(
            Q(user_created=False) | Q(user=self.request.user)
        )
        return super().get_queryset()

This, in theory, should return the same functionality as before, but now we can call http://localhost:8000/foods/?name=chocolate or anything like that and it will properly filter the queryset.

The problem

The issue that we run into, though, has to do with going to the next page. Currently, the next and previous page links on the template don't have any way of knowing what the current query is. So, while the first link will go to http://localhost:8000/foods/?name=chocolate but if I click on the "next page" link it will go to http://localhost:8000/foods/?page=2 and it will forget about the filter that I applied.

The solution

The simplest way I found to do this, as of this moment, is two-fold.

Update the context

Within the view itself we need to add a get_context_data method

class FoodListView(FilterView):
    model = Food
    paginate_by = 20
    filterset_class = FoodFilter
    template_name_suffix = "_list"

    def get_queryset(self) -> QuerySet[Food]:
        self.queryset = Food.objects.filter(
            Q(user_created=False) | Q(user=self.request.user)
        )
        return super().get_queryset()

    def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
        context = super().get_context_data(**kwargs)
        context["query"] = dict()
        for k, v in context["filter"].data.items():
            if k != "page":
                context["query"][k] = v

        return context

What this will do is it will check to see what the items are in the QueryDict that Django filter uses, and create a query object on the context that will include all existing query parameters but not including any that have page as the key because we want to let the built-in pagination handle that.

Update the template

Then we just update the template to include all of these query objects on the next and prev anchor tags:

{# food_list.html #}

{% extends 'base.html' %}

{% block content %}
  <ul>
    {% for food in food_list %}
      <li>{{ food }}</li>
    {% endfor %}
  </ul>


  <div class="pagination">
    <span class="step-links">
      {% if page_obj.has_previous %}
        <a href="?page=1{% for k, v in query.items %}&{{ k }}={{ v }}{% endfor %}">&laquo; first</a>
        <a href="?page={{ page_obj.previous_page_number }}{% for k, v in query.items %}&{{ k }}={{ v }}{% endfor %}">previous</a>
      {% endif %}

      <span class="current">
        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
      </span>

      {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}{% for k, v in query.items %}&{{ k }}={{ v }}{% endfor %}">next</a>
        <a href="?page={{ page_obj.paginator.num_pages }}{% for k, v in query.items %}&{{ k }}={{ v }}{% endfor %}">last &raquo;</a>
      {% endif %}
    </span>
  </div>
{% endblock content %}

What this will now do is append an &k=v for each key/value pair that previously existed in the Django filter query. I'm sure I'm going to abstract this out into a snippet that will be more easily reusable down the road, but for now this was the easiest way to get it working quickly.

and it actually kind of resonated with me. You see, my "first love" in web development is Django. For as "antiquated" as it is when you compare it to things like Node, Go, or even things like FastAPI, something about the whole setup just works. Sure, there are myriad frustrations when you want to venture outside of what Django's core functionality is, but if you need to build something and you don't care about the minutiae, Django is fantastic. It provides built-in auth, routing is easy enough to do, it gives easy access to the request object, among many other things. There are definitely problems with it, though, too like dealing with static files, where to put code if you need any custom configuration, and other things. That said, since I knew a little python when I started web development this seemed the obvious first choice.

This also seems to be the way my mind wants to go any time I think about a new project to build that is not a static site. For example, in my spare time (what little of it I have) I'm currently building an app that is a weight tracker that uses the old Points Plus formula from Weight Watchers. I used Weight Watchers nearly 10 years ago now and I lost about 80 pounds in ~8 months and I had gone into maintenance mode until they overnight changed everyone in their system to their new (at the time) Smartpoints system. The problem for me was that I was on a system that worked, and all of a sudden my breakfast that only cost me 7 points on the old system was now 11 points. If there's one thing that is helpful when it comes to Weight Watchers systems it's if you follow it then it can bring about a lifestyle shift which helps keep weight off long-term. I went from 275 in July, 2012 to 195 in February, 2013 and while I'm back up to nearly 230 now, I was generally able to do a decent job keeping it off.

This seems tailor made to use Django because each user would have their own experience requiring authentication, and there is a very straight-forward schema from a database perspective. The problem that I run into, though, is that whenever I'm building a Django site I have this weird need to always want to ship a site with as little JavaScript as is humanly possible. I have this weird thought in my mind that if I'm going to be shipping JavaScript I might as well use something that's built for client-side interactivity instead of trying to mimic it myself. In the weight app, as an example, if you're setting up a recipe and you're trying to add a food to the recipe that doesn't exist then how do you go and create a new food (on a different page) while saving the user's progress up to that point in the recipe? It's easy enough with JavaScript but HOW DO YOU DO IT WITHOUT JAVASCRIPT? I'm genuinely curious.

That said, whenever I'm learning about a SSR framework like Next/Nuxt/SvelteKit and the instructor (usually Max at Academind) talks about rendering HTML on the server to be sent to the user I can't help but think "well why the hell am I even bothering with the frontend framework?" There's a very valid reason why I'm bothering with it, but that's just where my mind goes. My mind is going many places today.

That leads into the last point: as a developer who desperately wants to just build cool websites, there are many things I'm wrestling with that I want to build.

• I'm currently recording a FastAPI tutorial to be released on YouTube soon
• I'm working on the weight tracking app (backend in FastAPI is done, working on the frontend)
• I will be recording a video about setting up a blog in Wordpress vs one in Strapi/SvelteKit
• I have ideas for a couple of other apps/sites to build

This is all while having a full-time job and two young kids at home. Hopefully I can get some of this done before 2023 but who knows? I'm posting this for accountability: I have to get some of it done.

• A candlestick chart
• A volume chart

These can be split out into two separate components, but we first need to install the charting library we'll use for this. There are many options one can choose from for charting but the one we're going to use here is a Vue version of ApexCharts, called (creatively) , vue-apexcharts. To install this we simply run

npm i apexcharts vue3-apexcharts

and then we create two components to split out functionality.

JVPCandlestick.vue

The first chart will contain the candlestick functionality, which will be called JVPCandlestick.vue. ApexCharts has a built-in candlestick chart which we'll use so the component itself will be fairly simple. In the link you'll see the format the data needs to be, which we've already addressed in a previous post.

Component setup

The template section of the component will be fairly straight-forward:

<template>
  <apexchart
      type="candlestick"
      width="100%"
      height="80%"
      :series="series"
      :options="chartOptions"
  ></apexchart>
</template>

where the series and chartOptions values will be set in a little bit. Before we do anything else, though, we need to update our main.js to globally declare the apexchart component.

// src/main.js
import {createApp} from 'vue';
import App from './App.vue';
import './index.css';

import VueApexCharts from 'vue3-apexcharts';

createApp(App).use(VueApexCharts).mount('#app');

You can see above we've imported VueApexCharts and are using it in the app itself. Now we need to handle the script section of the JVPCandlestick component. We will need to include the series to display the data, as well as any other information we want including the symbol and interval, all of which need to be declared as props. We then will set the chart title to be a computed property that displays nothing if we don't have any series data but will display the ticker and interval whenever we do have data. Finally, we will set some chart options for displaying the title, the format of the x and y axes, as well as the tooltip.

import {computed, defineComponent} from 'vue';

export default defineComponent({
  props: {
    symbol: {
      type: String,
      required: true,
    },
    interval: {
      type: String,
      required: true,
    },
    series: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const interval = computed(() => props.interval);
    const symbol = computed(() => props.symbol);
    const series = computed(() => props.series);

    const title = computed(() =>
      !series.value.length ? '' : `${interval.value} Chart of $${symbol.value}`
    );

    const chartOptions = computed(() => ({
      chart: {
        type: 'candlestick',
        id: 'candles',
        zoom: {
          enabled: false,
        },
      },
      title: {
        text: title.value,
        align: 'left',
        floating: true,
        offsetY: 25,
        offsetX: 10,
        style: {
          fontSize: '2rem',
        },
      },
      xaxis: {
        type: 'datetime',
      },
      yaxis: {
        tooltip: {
          enabled: true,
        },
        labels: {
          formatter: (val) => val.toFixed(0),
        },
      },
    }));

    return { series, chartOptions };
  },
});

With this component now set up, we can include it in the Chart.vue component.

<template>
  <div>
    <JVPCandlestick :series="series" :interval="interval" :symbol="symbol" />
  </div>
</template>

Now a simple search of any ticker should yield the following:

Note

There is a line in the Selections.vue component that provided some broken behavior. Within the postProcessData method, the state.endDate value, if always fetching a daily chart, would constantly re-set the endDate value to be one day earlier. A quick fix around this is to simply replace state.endDate = formatDate(dates[dates.length - 1]); with

if (!state.endDate) {
  state.endDate = formatDate(dates[dates.length - 1]);
}

JVPVolume.vue

Next we need to set up the volume chart, which will go below the candlestick chart, and will be called JVPVolume.vue. This is similarly simple, as we will just use a bar chart from vue3-apexcharts.

<template>
  <apexchart 
    type="bar"
    width="100%"
    height="20%"
    :series="series"
    :options="chartOptions"
  ></apexchart>
</template>

We then simply pull in the volume prop and set series as a computed property, and similarly set some chart options.

import { computed, defineComponent } from 'vue';
export default defineComponent({
  props: {
    volume: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const series = computed(() => props.volume);

    const chartOptions = computed(() => ({
      type: 'bar',
      brush: {
        enabled: true,
        target: 'candles',
      },
      dataLabels: {
        enabled: false,
      },
      plotOptions: {
        bar: {
          columnWidth: '80%',
        },
      },
      stroke: {
        width: 0,
      },
      xaxis: {
        type: 'datetime',
        axisBorder: {
          offsetX: 13,
        },
        categories: props.volume[0]?.data.map((e) => e.x.getTime()) ?? [],
      },
    }));

    return { series, chartOptions };
  },
});

We can then include the JVPVolume.vue component in Chart.vue as

<template>
  <div>
    <JVPCandlestick :series="series" :interval="interval" :symbol="symbol" />
    <JVPVolume :volume="volume" />
  </div>
</template>

and fetching the data for a ticker gives the following result which, admittedly, looks fairly ugly. To combat this, we'll add some styling to the Chart.vue component to make things look a bit nicer.

Chart.vue styling

First, we will set the height on the wrapping div, as well as set some flex justification and alignment.

<template>
  <div class="mx-auto h-1/2 sm:h-4/6">
    <JVPCandlestick :series="series" :interval="interval" :symbol="symbol"/>
    <JVPVolume :volume="volume" />
  </div>
</template>

Setting this makes the resulting chart look much better The problem, though, is that when the page first loads and there is no data the page looks somewhat ugly.

Thus, let's add some dynamic content that will render one thing if we have data, and will render something else if we do not. First, we wrap the charts in a div with an if statement, and otherwise display a message. We will then set some basic styling on these two elements.

<template>
  <div
    class="mx-auto h-1/2 sm:h-4/6 lg:h-5/6"
    :class="series.length ? '' : 'flex items-center justify-center'"
  >
    <div v-if="series.length" class="h-full">
      <JVPCandlestick :series="series" :interval="interval" :symbol="symbol" />
      <JVPVolume :volume="volume" />
    </div>
    <div v-else id="chart" class="text-4xl flex items-center justify-center">
      Choose a company, interval, and dates below
    </div>
  </div>
</template>

The :class attribute in the wrapping div allows us to set styles dynamically. It has the same functionality as the general class attribute above it, but this allows us to bind the class to something programmatically. With this set-up, the initial page, prior to loading data, looks like this

Summary

With that, we have a simple app that uses FastAPI on the server to fetch data and Vue with Vuelidate and ApexCharts to display data on the frontend. The entire repo can be found at https://github.com/jvp-design/stock-chart-fastapi-vue/

Passing data to App.vue

Finishing off processing data

We left off with data and volData elements defined in Selections.vue, and we need to somehow pass them up into App.vue and then down into another component that we'll create. First, we need to actually return data from our postProcessData method. We could just emit the event directly from that method but it's better to keep each method focused on its own purpose. Thus, the updated method will look like

const postProcessData = (res) => {
  // Parse dates
  const formatDate = (d) => new Date(d).toISOString().substr(0, 10);
  const dates = res.map((e) => e.date).sort();
  state.startDate = formatDate(dates[0]);
  state.endDate = formatDate(dates[dates.length - 1]);

  // Format the data
  const data = res.map((e) => ({
    x: new Date(e.date),
    y: e.data,
  }));
  const volData = res.map((e) => ({
    x: new Date(e.date),
    y: e.volume ?? 0,
  }));

  return {
    series: [{data}],
    symbol: state.symbol,
    interval: state.interval,
    volume: [{name: 'volume', data: volData}]
  }
};

We are returning the data in this manner because we have already set four data elements in App.vue

const series = ref([]);
const symbol = ref('');
const interval = ref('Daily');
const volume = ref([])

Thus we will want to set these values for use in the eventual chart component, so formatting the emitted data in this manner will make things easier in general. The series and volume data are formatted the way they are because the charting platform we'll be using is ApexCharts and the data structure needs to be in the format set above.

Then we need to update handleSubmit to get this data and emit it to the App.vue component.

const handleSubmit = async () => {
    v$.value.$validate();
    if (!v$.value.$invalid) {
        loading.value = true;
        try {
            const url = preProcessData();
            const res = await fetchData(url);
            const payload = postProcessData(res);

            emit('setData', payload);
        } catch (err) {
            console.log('err', err);
            dialog.value = true;
        }
        loading.value = false;
    }
};

Emitting the event

In order to do this, we need to update our code in two other places. First, we need to update the setup method in Selections.vue to include the emit handler

export default defineComponent({
  components: { JVPDialog, JVPInput, JVPSelect },
  emits: ['setData'],
  setup(_, { emit }) {

The _ in the setup method is because we're not actually using props anywhere in this component. You can pass in the props argument but it won't do anything.

We then also need to listen for the event in App.vue. This will involve adding the event listener onto the Selections element in the template, but also adding a method to handle this data in the setup function.

<template>
  <div class="h-screen bg-gray-200">
    <Selections class="px-4" @setData="setData" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Selections from './components/Selections.vue';

export default defineComponent({
  components: { Selections },
  setup() {
    const series = ref([]);
    const symbol = ref('');
    const interval = ref('Daily');
    const volume = ref([]);

    const setData = (payload) => {
      console.log('in setData');
      console.log(payload);
    };

    return { series, symbol, interval, volume, setData };
  },
});
</script>

Upon making these adjustments and submitting a request for data for $MSFT the resulting console looks like

Charting the data

Organizing data in App.vue

Now that we have the data in App.vue we will need to store it instead of just logging it to the console. This is fairly straightforward

const setData = (payload) => {
  series.value = payload.series
  symbol.value = payload.symbol
  interval.value = payload.interval
  volume.value = payload.volume
}

This seems fairly verbose, though not debilitatingly so.

Creating a Chart.vue component

We now need a component to hold this data and eventually render the chart.

<template>
  <div>
    <div>
      {{ symbol }}
    </div>
    <div>
      {{ interval }}
    </div>
    <div>
      {{ series }}
    </div>
    <div>
      {{ volume }}
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    symbol: {
      type: String,
      required: true,
    },
    interval: {
      type: String,
      required: true,
    },
    series: {
      type: Array,
      required: true,
    },
    volume: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    return {
      ...props,
    };
  },
});
</script>

We then update App.vue to include this component

<template>
  <div class="h-screen bg-gray-200">
    <Chart
      :series="series"
      :symbol="symbol"
      :interval="interval"
      :volume="volume"
    />
    <Selections class="px-4" @setData="setData" />
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';
import Selections from './components/Selections.vue';
import Chart from './components/Chart.vue';

export default defineComponent({
  components: { Selections, Chart },
  setup() {
    const series = ref([]);
    const symbol = ref('');
    const interval = ref('Daily');
    const volume = ref([]);

    const setData = (payload) => {
      series.value = payload.series
      symbol.value = payload.symbol
      interval.value = payload.interval
      volume.value = payload.volume
      console.log('data fetched and set')
    };

    return { series, symbol, interval, volume, setData };
  },
});
</script>

And we click the button to fetch the data and we get the following which doesn't make any sense since the data has clearly been set in App.vue. What's actually happening is

• The Chart.vue component is mounted with data that exists in App.vue at first
• Data is fetched from Selections.vue and passed up to App.vue
• Data is then passed down to Chart.vue
• Nothing is telling Chart.vue to check to see if props changed to trigger a re-render!!!

Watching for data changes

There are a few ways that we can make sure that Chart.vue will watch the props and re-paint the DOM when data are updated. The most straight-forward way is to make all four elements computed properties in Chart.vue. We will need to import computed at the top of the script tag, and then do the following

setup(props) {
  const symbol = computed(() => props.symbol.toUpperCase());
  const interval = computed(() => props.interval);
  const series = computed(() => props.series);
  const volume = computed(() => props.volume);
  return {
    symbol,
    interval,
    series,
    volume,
  };
},

Computed properties are like reactive elements in a Vue component. Any time the data inside the anonymous function for the computed property is updated then the resulting element will also update. We could utilize watchers but again, this is a fairly straightforward solution for what we need. Upon doing this and fetching the data again we see

and we have the updated data as anticipated.

In the next article we'll install and include Vue3 ApexCharts to render out the stock chart as well as the volume chart.

To do this we simply update the section in Selections.vue that converts the interval into what can be parsed by the backend to look like

const interval = null
  // state.interval === 'Daily'
  //   ? '1d'
  //   : state.interval === 'Weekly'
  //     ? '1wk'
  //     : '1mo';

If we do this and then try to submit a request to the backend with, for example, MSFT as the symbol, this is what the page will look like If we didn't have the dev tools open (as the vast majority of users don't) then we would have no idea what is going on as it would look like the request never completes. Thus, we need to add some sort of exception handling in this method.

Try/Catch

There are generally two ways to handle error handling in this project

• .then().catch().finally() methodology
• async/await methodology

Since we're already using async/await in the current method we'll discuss that here. First, we don't need to wrap the entire handleSubmit method in a try/catch block. We're processing data in the first 40% of the method, and also in the last 40% of the method. The only place that we really need to have the try/catch block is around the async function call. That said, it will make things a bit more organized if we can separate out some of the functionality. We will split the bulk of the code in handleSubmit into three separate methods: preProcessData, fetchData, postProcessData. This is unnecessary and may be overkill for smaller personal projects, but it will make it easier to keep track of everything.

Sub-methods

The first is preProcessData:

const preProcessData = () => {
    // Create the querystring
    const query = {}
    if (!!state.startDate) query.start = state.startDate;
    if (!!state.endDate) query.end = state.endDate;

    const queryString = Object.keys(query)
        .filter((key) => !!query[key])
        .map((key) => {
            return (
                `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`
            );
        })
        .join('&')

    // Convert human-readable interval into yfinance style
    const interval = null
    // state.interval === 'Daily'
    //   ? '1d'
    //   : state.interval === 'Weekly'
    //     ? '1wk'
    //     : '1mo';

    // Create URL string and add query if it exists
    let url = `http://localhost:8000/quote/${state.symbol}/${interval}`;
    if (queryString.length) url = `${url}?${queryString}`;
    return url
}

We will get the url from this method and pass it into fetchData

const fetchData = async (url) => {
    const response = await fetch(url);
    return await response.json();
}

Which will, in turn, return the json data that we get from the backend and pass it to postProcessData

const postProcessData = (res) => {
  // Parse dates
  const formatDate = (d) => new Date(d).toISOString().substr(0, 10);
  const dates = res.map((e) => e.date).sort();
  state.startDate = formatDate(dates[0])
  state.endDate = formatDate(dates[dates.length - 1])

  // Format the data
  const data = res.map((e) => ({
    x: new Date(e.date),
    y: e.data
  }));
  const volData = res.map((e) => ({
    x: new Date(e.date),
    y: e.volume ?? 0
  }));
}

handleSubmit refactor

This allows us to refactor handleSubmit to look like this

const handleSubmit = async () => {
  v$.value.$validate();
  if (!v$.value.$invalid) {
    loading.value = true;
    try {
      const url = preProcessData();
      const res = await fetchData(url);
      postProcessData(res);
    } catch(err) {
      console.log('err', err)
    }
    loading.value = false;
  }
};

We will now see that if we try clicking the button to get the chart that the loading spinner stops and we'll see a more descriptive error: The problem that we'll run into in this situation, though, has to do with the loading spinner. Again, we run into the problem where if we didn't have the dev tools open then we would have received no feedback about this error. We need to somehow let the user know that something went wrong.

Error Dialog

The first thing we're going to do is create a separate component and import it into our Selections.vue component. This component will use the Dialog (Modal) component from Headless UI. The new component, called JVPDialog.vue, the bulk of which (not including the open/close states) comes from the modal section of TailwindUI.

<template>
  <TransitionRoot as="template" :show="open">
    <Dialog
        as="div"
        class="fixed z-10 inset-0 overflow-y-auto"
        @close="closeDialog"
    >
      <div
          class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
      >
        <TransitionChild
            as="template"
            enter="ease-out duration-300"
            enter-from="opacity-0"
            enter-to="opacity-100"
            leave="ease-in duration-200"
            leave-from="opacity-100"
            leave-to="opacity-0"
        >
          <DialogOverlay
              class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
          />
        </TransitionChild>

        <!-- This element is to trick the browser into centering the modal contents. -->
        <span
            class="hidden sm:inline-block sm:align-middle sm:h-screen"
            aria-hidden="true"
        >
          &#8203;
        </span>
        <TransitionChild
            as="template"
            enter="ease-out duration-300"
            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            enter-to="opacity-100 translate-y-0 sm:scale-100"
            leave="ease-in duration-200"
            leave-from="opacity-100 translate-y-0 sm:scale-100"
            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        >
          <div
              class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
          >
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
              <div class="sm:flex sm:items-start">
                <div
                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
                >
                  <ExclamationIcon
                      class="h-6 w-6 text-red-600"
                      aria-hidden="true"
                  />
                </div>
                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <DialogTitle
                      as="h3"
                      class="text-lg leading-6 font-medium text-gray-900"
                  >
                    Not found
                  </DialogTitle>
                  <div class="mt-2">
                    <p class="text-sm text-gray-500">
                      There was an error fetching the data to populate that
                      chart. Please try again
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div
                class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
            >
              <button
                  type="button"
                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                  @click="closeDialog"
              >
                Close
              </button>
            </div>
          </div>
        </TransitionChild>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script>
import { computed } from 'vue';
import {
  Dialog,
  DialogOverlay,
  DialogTitle,
  TransitionChild,
  TransitionRoot,
} from '@headlessui/vue';
import { ExclamationIcon } from '@heroicons/vue/outline';

export default {
  components: {
    Dialog,
    DialogOverlay,
    DialogTitle,
    TransitionChild,
    TransitionRoot,
    ExclamationIcon,
  },
  props: {
    dialog: {
      type: Boolean,
      required: true,
    },
  },
  emits: ['closeDialog'],
  setup(props, { emit }) {
    const open = computed(() => props.dialog);
    const closeDialog = () => emit('closeDialog');

    return {
      open,
      closeDialog,
    };
  },
};
</script>

We then add it to the beginning of Selections.vue like

<template>
  <div>
    <JVPDialog :dialog="dialog" @closeDialog="closeDialog" />
    <form class="ml-5" @submit.prevent="handleSubmit">
      <div class="my-1">
        <JVPInput
          v-model="state.symbol"
          label="Symbol"

where we've imported it and registered it as necessary, and added the following lines to the script section of the component

const dialog = ref(false);

const closeDialog = () => (dialog.value = false)

and also included these in the return statement of the setup function

return {
  intervals,
  state,
  disabled,
  loading,
  dialog,
  v$,
  handleSubmit,
  closeDialog,
};

For what it's worth, I know there is a lot going on in the JVPDialog.vue file and it would be worth it to discuss much of the functionality in depth, but I've never been good at CSS and I have found that paying for an account at TailwindUI has been more than worth it. You can play around with some of the classes in that component and see how things change and update. Also, it's worth noting that the modal I've used above is available as the free option on the main page, in case Adam Wathan ever reads this article. Now, all we need to do is add in a simple line in the catch block of handleSubmit that activates the dialog when an error is received.

const handleSubmit = async () => {
    v$.value.$validate();
    if (!v$.value.$invalid) {
        loading.value = true;
        try {
            const url = preProcessData();
            const res = await fetchData(url);
            postProcessData(res);
        } catch (err) {
            console.log('err', err);
            dialog.value = true;
        }
        loading.value = false;
    }
};

and the resulting dialog that we see is displayed below. Before signing off, we need to make sure that we re-set the interval to be an actual valid value instead of the null value we set for these testing purposes.

In the next article we'll discuss handling the actual returned data and passing it to another component for rendering the chart.

Spin up the server

In case we don't recall from Part 1 of this series, our server is set up in a Python environment using FastAPI. If our directory structure is like this

.
├── fast-api-vue-stock
│   ├── client
│   └── server
│       └── main.py

we can open a terminal/command prompt and type the following

cd /path/to/server
env\Scripts\activate
uvicorn main:app --reload

This assumes that we already have the same setup as was described in Part 1 of the tutorial. By typing this then our server should be running at port 8000.

Connecting to the server

Create a querystring

For those who may not recall, the format of the url that we will be consuming in the backend is of the format /quote/{ticker}/{interval}. Then, any date information, as it is optional, is passed in via query parameters in the format YYYY-mm-dd. So, within the handleSubmit method in Selections.vue we first need to create a query object and add the start and end dates if they exist.

const query = {}
if (!!state.startDate) query.start = state.startDate;
if (!!state.endDate) query.end = state.endDate;

Then, we can just map through the keys of the query and use the encodeURIComponent built-in method to convert our dates into the correct format. It should be noted that since we're only doing this with two values the method that will be presented below may be a little overkill, but the idea is that this method can be used for any number of query parameters so it's worth it to present.

const queryString = Object.keys(query)
  .filter((key) => !!query[key])
  .map((key) => {
    return (
      `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`
    );
  })
  .join('&')

To see what this method does, let's use the following object as an example

query = {
  "hello": "world",
  "hashnode": [1,2,3],
  "vue": {
    "is": "cool"
  },
  "fastapi": "is as well"
}

If we then look at the resulting string, we get 'hello=world&hashnode=1%2C2%2C3&vue=%5Bobject%20Object%5D&fastapi=is%20as%20well' and we notice that there is an object%20Object where the value for the vue key should be. This shows us that we can't just use this method for any deeply nested structures, but it instead works for simple key-value stores. If we instead set

query = {
  "hello": "world",
  "hashnode": [1,2,3],
  "vue": ["is", "cool"],
  "fastapi": "is as well"
}

then the resulting string would look like 'hello=world&hashnode=1%2C2%2C3&vue=is%2Ccool&fastapi=is%20as%20well' which would work much better. There is an argument that you shouldn't need to do something like this when you're passing in the data yourself, but I've found that it can't hurt to just be extra careful with these sorts of things. Now we should have a valid query string for our start and end dates, if they exist.

Convert human-readable interval into yfinance style

The next step is to convert the interval into the style that yfinance needs. For human readability, we're presenting our intervals as "Daily", "Weekly", and "Monthly", but these won't work in yfinance and we should actually get errors if we try to pass these values in because we've set the allowable input values to be one of 1d, 1wk, or 1mo. So, this is as simple as just using a nested JavaScript ternary operator.

const interval = 
  state.interval === 'Daily'
    ? '1d'
    : state.interval === 'Weekly'
    ? '1wk'
    : '1mo';

This sets the interval constant to 1d if the state's interval value is Daily, otherwise if the state's interval value is Weekly it sets it to 1wk, otherwise it sets it to 1mo. The equivalent code in if statements would be

let interval;

if (state.interval === 'Daily') {
  interval = '1d'
} else if (state.interval === 'Weekly') {
  interval = '1wk'
} else {
  interval = '1mo'
}

Create the URL string and add the query if it exists

We can now create the URL that will be used to fetch the data from our server. We first set up the basic url with the symbol and interval values

let url = `http://localhost:8000/quote/${state.symbol}/${interval}`;

and we then need to append any query string, if it exists.

if (queryString.length) url = `${url}?${queryString}`;

We do this because we need to put a ? at the beginning of the query string. The next step is to fetch the data from the server using the built-in fetch API.

const response = await fetch(url);
const res = await response.json();

Parse the dates and format data

Parse dates

The next step is to update the state's startDate and endDate with the values obtained from the server. This is done because one or both of the dates input by the user may have been weekends or holidays, or any other myriad possibilities. We assume that the data we've received from the server contains valid dates, so the simplest way to do this is to just set state.startDate to the earliest date, and state.endDate to the latest date. First, we want to create an anonymous function that will format the dates into the format we're currently using on the site.

const formatDate = (d) => new Date(d).toISOString().substr(0, 10);

and then we sort the dates, and set each one

const dates = res.data.map((e) => e.date).sort();
state.startDate = formatDate(dates[0])
state.endDate = formatDate(dates[dates.length - 1])

Format the data into our desired output

This last step is going to come slightly out of left field; we are going to format the data in a format that will eventually be used by our charting platform. We're going to have the x coordinates be the dates and the y coordinates be the data, whether volume or stock prices.

const data = res.data.map((e) => ({
  x: new Date(e.date),
  y: e.data
}));
const volData = res.data.map((e) => ({
  x: new Date(e.date),
  y: e.volume ?? 0
}));

The entire code of the handleSubmit method should now look like this

const handleSubmit = async () => {
  v$.value.$validate();
  if (!v$.value.$invalid) {
    loading.value = true;

    // Create the querystring
    const query = {}
    if (!!state.startDate) query.start = state.startDate;
    if (!!state.endDate) query.end = state.endDate;

    const queryString = Object.keys(query)
      .filter((key) => !!query[key])
      .map((key) => {
        return (
          `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`
        );
      })
      .join('&')

    // Convert human-readable interval into yfinance style
    const interval =
      state.interval === 'Daily'
        ? '1d'
        : state.interval === 'Weekly'
          ? '1wk'
          : '1mo';

    // Create URL string and add query if it exists
    let url = `http://localhost:8000/quote/${state.symbol}/${interval}`;
    if (queryString.length) url = `${url}?${queryString}`;
    const response = await fetch(url);
    const res = await response.json();

    // Parse dates
    const formatDate = (d) => new Date(d).toISOString().substr(0, 10);
    const dates = res.data.map((e) => e.date).sort();
    state.startDate = formatDate(dates[0])
    state.endDate = formatDate(dates[dates.length - 1])

    // Format the data
    const data = res.data.map((e) => ({
      x: new Date(e.date),
      y: e.data
    }));
    const volData = res.data.map((e) => ({
      x: new Date(e.date),
      y: e.volume ?? 0
    }));

    loading.value = false;
  }
};

You'll notice that we removed the setTimeout and added an entry at the bottom to set the loading spinner to false. Also, we needed to make the function itself async in order to utilize the await keyword.

In the next article we'll discuss error handling, because having this type of functionality not wrapped in try and catch blocks is a recipe for disaster. We'll also add in a dialog to alert the user when an error has taken place.

Styling the button

We initially added in "placeholder" classes so the button actually looked like something. We'll remove the border-4 and border-indigo-500 classes and replace them with the following:

• w-full -> take up the full width of the parent container
• h-12 -> fixing height, this will be beneficial for a loading icon later
• px-6 -> some horizontal padding
• mt-6 -> margin on the top to clear it from the JVPSelect.vue component
• lg:mt-0 -> removing said margin when on lg or xl breakpoints, as declared by Tailwind
• rounded-lg -> just rounding the corners a bit to look nicer
• bg-indigo-700 -> background coloring
• text-indigo-100 -> a similar text shade to the background, but with enough contrast
• transition-colors -> a transition class that will only transition the color attributes that will be updated
• duration-150 -> setting a duration for the aforementioned transitions
• hover:bg-indigo-800 -> a slightly darker color on hover (this is where the transition-colors will have an affect)
• focus:shadow-outline -> a subtle outline when the button is focused, as in when tabbing through inputs
• disabled:opacity-50 -> setting the opacity to be 50% if the button is disabled
• disabled:cursor-not-allowed -> disable the standard pointer cursor for a button when the button is disabled

Button logic

In the previous article we didn't include any disabled functionality on the button because we wanted to include good feedback for error handling. Now we can include disabled functionality, which we started in the previous article where we set up a computed property:

const disabled = computed(() => {
  return v$.value.$invalid;
});

All we need to do now is add a dynamic :disabled property to the button in the template. Now the button markup looks like this

<button
  type="submit"
  class="
    w-full
    h-12
    px-6
    mt-6
    lg:mt-0
    rounded-lg
    bg-indigo-700
    text-indigo-100
    transition-colors
    duration-150
    hover:bg-indigo-800
    focus:shadow-outline
    disabled:opacity-50
    disabled:cursor-not-allowed
  "
  :disabled="disabled"
>
  Get Chart
</button>

and the form, with the disabled button, looks like

Icons

We hold off on handling logic on a valid form submission until the next article because we first want to include display of icons. We will use this functionality to add a loading spinner to the button while awaiting a response so it makes sense to handle this now. We can use icons from libraries like FontAwesome, Material Design Icons, Google Font Icons, but since we're using Vue, and Tailwind CSS integrates very well with React and Vue (TailwindUI was built for those two frameworks), we can simply install heroicons. We open a terminal/command prompt and type

npm i -D @heroicons/vue

and we should have a set of free icons created by https://twitter.com/steveschoger, who is a partner/designer at Tailwind Labs. Now that we've installed the icons, we can import the icons we need.

Exclamation

We want to add in a little warning icon in the JVPInput.vue component any time data validation fails. In order to do this, we just need to import the component and register it

import { defineComponent, computed } from 'vue';
import { ExclamationCircleIcon } from '@heroicons/vue/solid';
import inputProps from '../utils/input-props';

export default defineComponent({
  components: { ExclamationCircleIcon },
  props: {
  ...

Then we can very simply add it, conditionally on error state, to the markup inside the <div class="mt-1 relative..." but after the actual input tag

<div
  v-if="isError"
  class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
  :class="type === 'date' ? 'pr-9' : 'pr-3'"
>
  <ExclamationCircleIcon
    class="h-5 w-5 text-red-500"
    aria-hidden="true"
  />
</div>

It is here that we see the importance of including the relative class on the wrapping div, because we want to absolutely position this icon inside of the input. We also conditionally render the right-padding based on whether the input type is a date, because if it is a date it shows the calendar icon and we don't want to cover that. Now an invalid input will include the exclamation icon as needed.

Loading spinner

This is not technically an icon, but we'll add it in the same section because it behaves similarly. The first thing we need to do is add in an element called loading in the script itself. It will be a simple boolean that will be false on initialization. We then need to conditionally render either the loading spinner, if loading === true, or the previously set text, "Get Chart" if not. Thus, the generic slot in the <button> element is replaced by

<span
  v-if="loading"
  class="
    animate-spin-1.5
    ease-linear
    rounded-full
    border-4 border-t-4 border-gray-200
    h-10
    w-10
    mx-auto
    block
  "
></span>
<span v-else>Get Chart</span>

The animate-spin-1.5 class is a custom class that we'll define in a minute, but the rest are all default Tailwind classes.

• ease-linear -> the linear transition-timing-function
• rounded-full -> makes the element a circle
• border-4 border-t-4 border-gray-200 -> border styling around this empty element; this will be what is actually displayed
• h-10 w-10 -> forcing a specific height and width
• mx-auto -> centering the element in its container
• block -> making the element a block-level (span is an inline element)

We then need to set up the custom loader class. This is a simple addition of a <style> tag at the bottom of the component

<style scoped>
.loader {
  border-top-color: #6366f1;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

We are setting a separate color for the top border, which will look like it's the only thing rotating. Now to test this we can update handleSubmit with to look like

const handleSubmit = () => {
  v$.value.$validate();
  if (!v$.value.$invalid) {
    loading.value = true;
    setTimeout(() => {
      console.log('triggered handleSubmit');
      loading.value = false
    }, 5000)
  }
}

We should now have a loader that is running for 5 seconds, and the console still logs "triggered handleSubmit" on a valid form submission. In the next article we'll handle form submission properly and fetch the data from the FastAPI server that we previously set up.

Code

As a reference, the updated Selections.vue and JVPInput.vue components should look like

Selections.vue

<template>
  <form class="ml-5" @submit.prevent="handleSubmit">
    <div class="my-1">
      <JVPInput
        v-model="state.symbol"
        label="Symbol"
        id="symbol"
        name="symbol"
        type="text"
        placeholder="eg. MSFT"
        :vuelidate="v$.symbol"
        hint="Required, less than 6 characters"
        :autofocus="true"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.startDate"
        label="Start Date"
        id="start-date"
        name="startDate"
        type="date"
        :vuelidate="v$.startDate"
        hint="Optional"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.endDate"
        label="End Date"
        id="end-date"
        name="endDate"
        type="date"
        :vuelidate="v$.endDate"
        hint="Optional"
      />
    </div>
    <div class="my-1">
      <JVPSelect
        v-model="state.interval"
        label="Interval"
        id="interval"
        :options="intervals"
      />
    </div>
    <button
      type="submit"
      class="w-full h-12 px-6 mt-6 lg:mt-0 rounded-lg bg-indigo-700 text-indigo-100 transition-colors duration-150 hover:bg-indigo-800 focus:shadow-outline disabled:opacity-50 disabled:cursor-not-allowed"
      :disabled="disabled"
    >
      <span
        v-if="loading"
        class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mx-auto block"
      ></span>
      <span v-else>Get Chart</span>
    </button>
  </form>
</template>

<script>
import { defineComponent, reactive, ref, computed } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, maxLength, helpers } from '@vuelidate/validators';
import JVPInput from './JVPInput.vue';
import JVPSelect from './JVPSelect.vue';

export default defineComponent({
  components: { JVPInput, JVPSelect },
  setup() {
    const intervals = ['Daily', 'Weekly', 'Monthly'];

    const state = reactive({
      symbol: '',
      interval: 'Daily',
      startDate: '',
      endDate: '',
    });

    const mustBeEarlierDate = helpers.withMessage(
      'Start date must be earlier than end date.',
      (value) => {
        const endDate = computed(() => state.endDate);
        if (!value || !endDate.value) return true;
        if (!checkDateFormat(endDate.value)) return true;
        return new Date(value) < new Date(endDate.value);
      }
    );

    const checkDateFormat = (param) => {
      if (!param) return true;
      return new Date(param).toString() !== 'Invalid Date';
    };

    const validateDateFormat = helpers.withMessage(
      'Please enter a valid date.',
      checkDateFormat
    );

    const rules = {
      symbol: { required, maxLength: maxLength(5) },
      startDate: {
        validateDateFormat,
        mustBeEarlierDate,
      },
      endDate: {
        validateDateFormat,
      },
    };
    const v$ = useVuelidate(rules, state);

    const disabled = computed(() => {
      return v$.value.$invalid;
    });

    const loading = ref(false);

    const handleSubmit = () => {
      v$.value.$validate();
      if (!v$.value.$invalid) {
        loading.value = true;
        setTimeout(() => {
          console.log('triggered handleSubmit');
          loading.value = false;
        }, 5000);
      }
    };

    return {
      intervals,
      state,
      disabled,
      loading,
      v$,
      handleSubmit,
    };
  },
});
</script>

<style scoped>
.loader {
  border-top-color: #6366f1;
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

JVPInput.vue

<template>
  <div>
    <label :for="id" class="block text-sm font-medium text-gray-700">
      {{ label }}
    </label>
    <div class="mt-1 relative rounded-md shadow-sm">
      <input
        :value="modelValue"
        :type="type"
        :name="id"
        :id="id"
        class="block w-full sm:text-sm rounded-md shadow-sm"
        :class="dynamicClass"
        :aria-invalid="isError"
        :aria-describedby="hintId"
        :autofocus="autofocus"
        @input="updateValue"
        @blur="vuelidate.$touch"
      />
      <div
        v-if="isError"
        class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
        :class="type === 'date' ? 'pr-9' : 'pr-3'"
      >
        <ExclamationCircleIcon
          class="h-5 w-5 text-red-500"
          aria-hidden="true"
        />
      </div>
    </div>
    <p v-if="hasHint" class="mt-0 text-sm" :class="hintClass" :id="hintId">
      {{ hintText }}
    </p>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { ExclamationCircleIcon } from '@heroicons/vue/solid';
import inputProps from '../utils/input-props';

export default defineComponent({
  components: { ExclamationCircleIcon },
  props: {
    type: {
      type: String,
      required: false,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: false,
    },
    vuelidate: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    autofocus: {
      type: Boolean,
      required: false,
      default: false,
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // This is simply cleaner than putting emit code in the HTML
    const updateValue = (e) => emit('update:modelValue', e.target.value);

    // Vuelidate is used as a validation library.
    // We use built-in functionality to determine if any rules are violated
    // as well as display of the associated error text
    const isError = computed(() => props.vuelidate.$error);
    const errorText = computed(() => {
      const messages =
        props.vuelidate.$errors?.map((err) => err.$message) ?? [];
      return messages.join(' ');
    });

    // This is solely to style the input based on whether it is in an error state or not
    const dynamicClass = computed(() => {
      // This is to remove padding on the right for the built-in calendar icon when using a date type
      let val = props.type === 'date' ? '' : 'pr-10';
      return isError.value
        ? `${val} border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500`
        : `${val} focus:ring-indigo-500 focus:border-indigo-500 border-gray-300`;
    });

    // The "hint" text will display any necessary hints as well as any error messages.
    // Styling and values of said hint text are primarily based on whether an input is in an error state.
    const hintClass = computed(() =>
      isError.value ? 'text-red-600' : 'text-gray-500'
    );
    const hintId = computed(() =>
      isError.value ? `${props.id}-error` : `${props.id}-input`
    );

    const hintText = computed(() => {
      if (errorText.value.length > 0) return errorText.value;
      if (!!props.hint) return props.hint;
      return '';
    });

    const hasHint = computed(() => !!hintText.value.length);

    return {
      hasHint,
      hintText,
      hintClass,
      hintId,
      dynamicClass,
      isError,
      autofocus: props.autofocus,
      vuelidate: props.vuelidate,
      updateValue,
    };
  },
});
</script>

We have already included the hint prop in our input-props.js file, so we don't need to add anything there. Now all we need to do to pass the hint to the JVPInput component is add it anywhere we want it displayed. For example, we want to tell the user that the symbol attribute is required and the dates are optional, so we would pass these in as hints.

<div class="my-1">
  <JVPInput
    v-model="state.symbol"
    label="Symbol"
    id="symbol"
    name="symbol"
    type="text"
    placeholder="eg. MSFT"
    :vuelidate="v$.symbol"
    hint="Required, less than 6 characters"
  />
</div>
<div class="my-1">
  <JVPInput
    v-model="state.startDate"
    label="Start Date"
    id="start-date"
    name="startDate"
    type="text"
    :vuelidate="v$.startDate"
    hint="Optional"
  />
</div>
<div class="my-1">
  <JVPInput
    v-model="state.endDate"
    label="End Date"
    id="end-date"
    name="endDate"
    type="text"
    :vuelidate="v$.endDate"
    hint="Optional"
  />
</div>

Hint/error logic

The next thing we need to do is incorporate the hint vs. error logic within the component script itself. We will be using the same space to display hints and errors, but we don't want to display a hint when an input is in an error state. We also want the text displayed to be dynamic depending on the state of the input. To that end, we'll add another computed property to JVPInput.vue

const hintText = computed(() => {
  if (errorText.value.length > 0) return errorText.value;
  if (!!props.hint) return props.hint;
  return '';
})

What this little property does is it displays any error messages, if they exist. If they don't, but a hint was passed down as a prop, then display the hint, otherwise just remain empty. We can then add

const hasHint = computed(() => !!hintText.value.length);

which will be truthy whether there is a hint or there are any error messages. Now the error text markup will be replaced with

<p v-if="hasHint">{{ hintText }}</p>

after having included both hasHint and hintText in the return section of the setup function.

Styling

Now we need to add some styling. The app still looks pretty horrendous so we need to clean it up a bit. The first thing we notice, though, is that there seems to be no highlighting around the JVPSelect.vue element. If we think back a bit, we included focus:ring-indigo-500 and focus:border-indigo-500 as classes on this element but as we tab through we don't see any of those. The reason for this is because we need to install

npm i @tailwindcss/forms

and include an extra plugin for Tailwind

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')], // <-- *** New line ***
}

By simply adding this plugin the form looks a bit better and we can see that in the focus state the JVPSelect.vue component has the correct highlighting. What we want to do next for the JVPInput.vue component is create a sort of dynamic class that will display certain properties when in a valid state and other properties in an error state.

// This is solely to style the input based on whether it is in an error state or not
const dynamicClass = computed(() => {
  // This is to remove padding on the right for the built-in calendar icon when using a date type
  let val = props.type === 'date' ? '' : 'pr-10';
  return isError.value
    ? `${val} border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500`
    : `${val} focus:ring-indigo-500 focus:border-indigo-500 border-gray-300`;
});

We will then update the class of the hint slightly and dynamically set the id value for the hint

// The "hint" text will display any necessary hints as well as any error messages.
// Styling and values of said hint text are primarily based on whether an input is in an error state.
const hintClass = computed(() =>
  isError.value ? 'text-red-600' : 'text-gray-500'
);
const hintId = computed(() =>
  isError.value ? `${props.id}-error` : `${props.id}-input`
);

We then pass the dynamicClass variable into the return statement of the setup function and add an extra line to the input tag

<input
  :value="modelValue"
  :type="type"
  :name="id"
  :id="id"
  class="block w-full sm:text-sm rounded-md shadow-sm"
  :class="dynamicClass"
  @input="updateValue"
/>

What this will do is always set the class to be block w-full sm:text-sm rounded-md shadow-sm regardless of the error state, but then it also adds on the extra elements defined in dynamicClass, which are dependent on the error state of the input.

We then want to add a bit of extra styling to the hint text itself just to give it a secondary focus.

<p v-if="hasHint" class="mt-0 text-sm" :class="hintClass" :id="hintId">
  {{ hintText }}
</p>

after having added the hintClass and hintId elements to the return statement of the setup function, of course.

Finishing touches on JVPInput.vue

To tie off the loose ends on the JVPInput.vue component there are just a few more things we want to add

• A couple of aria attributes
• Tell vuelidate to validate each input on a blur event
• Add autofocus as a prop and bind it to the input

<input
  :value="modelValue"
  :type="type"
  :name="id"
  :id="id"
  class="block w-full sm:text-sm rounded-md shadow-sm"
  :class="dynamicClass"
  :aria-invalid="isError"
  :aria-describedby="hintId"
  :autofocus="autofocus"
  @input="updateValue"
  @blur="vuelidate.$touch"
/>

You can see in the code snippet above we're accessing vuelidate and autofocus directly instead of via the props. In order to do this we simply need to update the return statement like so

return {
  hasHint,
  hintText,
  hintClass,
  hintId,
  dynamicClass,
  isError,
  autofocus: props.autofocus,
  vuelidate: props.vuelidate,
  updateValue,
};

To tie a final bow on this component, we will actually update two things in Selections.vue. You'll notice when creating the dynamicClass variable we allowed for a class of pr-10 if the type prop passed in is "date". This will automatically add in the calendar icon, so in Selections.vue we'll change the type of startDate and endDate to be "date".

Summary

Now that all of that is done, we've nearly finished with the form components. What we will do in the next, short, article will be adding in svg icons to the project so that we can easily include them in our code wherever we need. We will also style the button because the rest of the form is starting to look nice and clean and the button is still pretty ugly. For the purpose of copy-pasting, the two components we updated in this section are Selections.vue and JVPInput.vue, the updated versions of both of which are presented now.

Selections.vue

<template>
  <form class="ml-5" @submit.prevent="handleSubmit">
    <div class="my-1">
      <JVPInput
        v-model="state.symbol"
        label="Symbol"
        id="symbol"
        name="symbol"
        type="text"
        placeholder="eg. MSFT"
        :vuelidate="v$.symbol"
        hint="Required, less than 6 characters"
        :autofocus="true"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.startDate"
        label="Start Date"
        id="start-date"
        name="startDate"
        type="date"
        :vuelidate="v$.startDate"
        hint="Optional"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.endDate"
        label="End Date"
        id="end-date"
        name="endDate"
        type="date"
        :vuelidate="v$.endDate"
        hint="Optional"
      />
    </div>
    <div class="my-1">
      <JVPSelect
        v-model="state.interval"
        label="Interval"
        id="interval"
        :options="intervals"
      />
    </div>
    <button type="submit" class="border-4 border-indigo-500">Get Chart</button>
  </form>
</template>

<script>
import { defineComponent, reactive, computed } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, maxLength, helpers } from '@vuelidate/validators';
import JVPInput from './JVPInput.vue';
import JVPSelect from './JVPSelect.vue';

export default defineComponent({
  components: { JVPInput, JVPSelect },
  setup() {
    const intervals = ['Daily', 'Weekly', 'Monthly'];

    const state = reactive({
      symbol: '',
      interval: 'Daily',
      startDate: '',
      endDate: '',
    });

    const mustBeEarlierDate = helpers.withMessage(
      'Start date must be earlier than end date.',
      (value) => {
        const endDate = computed(() => state.endDate);
        if (!value || !endDate.value) return true;
        if (!checkDateFormat(endDate.value)) return true;
        return new Date(value) < new Date(endDate.value);
      }
    );

    const checkDateFormat = (param) => {
      if (!param) return true;
      return new Date(param).toString() !== 'Invalid Date';
    };

    const validateDateFormat = helpers.withMessage(
      'Please enter a valid date.',
      checkDateFormat
    );

    const rules = {
      symbol: { required, maxLength: maxLength(5) },
      startDate: {
        validateDateFormat,
        mustBeEarlierDate,
      },
      endDate: {
        validateDateFormat,
      },
    };
    const v$ = useVuelidate(rules, state);

    const disabled = computed(() => {
      return v$.value.$invalid;
    });

    const handleSubmit = () => {
      v$.value.$validate();
      if (!v$.value.$invalid) {
        console.log('triggered handleSubmit');
      }
    };

    return {
      intervals,
      state,
      disabled,
      v$,
      handleSubmit,
    };
  },
});
</script>

JVPInput.vue

<template>
  <div>
    <label :for="id" class="block text-sm font-medium text-gray-700">
      {{ label }}
    </label>
    <div class="mt-1 relative rounded-md shadow-sm">
      <input
        :value="modelValue"
        :type="type"
        :name="id"
        :id="id"
        class="block w-full sm:text-sm rounded-md shadow-sm"
        :class="dynamicClass"
        :aria-invalid="isError"
        :aria-describedby="hintId"
        :autofocus="autofocus"
        @input="updateValue"
        @blur="vuelidate.$touch"
      />
    </div>
    <p v-if="hasHint" class="mt-0 text-sm" :class="hintClass" :id="hintId">
      {{ hintText }}
    </p>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import inputProps from '../utils/input-props';

export default defineComponent({
  props: {
    type: {
      type: String,
      required: false,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: false,
    },
    vuelidate: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    autofocus: {
      type: Boolean,
      required: false,
      default: false
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // This is simply cleaner than putting emit code in the HTML
    const updateValue = (e) => emit('update:modelValue', e.target.value);

    // Vuelidate is used as a validation library.
    // We use built-in functionality to determine if any rules are violated
    // as well as display of the associated error text
    const isError = computed(() => props.vuelidate.$error);
    const errorText = computed(() => {
      const messages =
        props.vuelidate.$errors?.map((err) => err.$message) ?? [];
      return messages.join(' ');
    });

    // This is solely to style the input based on whether it is in an error state or not
    const dynamicClass = computed(() => {
      // This is to remove padding on the right for the built-in calendar icon when using a date type
      let val = props.type === 'date' ? '' : 'pr-10';
      return isError.value
        ? `${val} border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500`
        : `${val} focus:ring-indigo-500 focus:border-indigo-500 border-gray-300`;
    });

    // The "hint" text will display any necessary hints as well as any error messages.
    // Styling and values of said hint text are primarily based on whether an input is in an error state.
    const hintClass = computed(() =>
      isError.value ? 'text-red-600' : 'text-gray-500'
    );
    const hintId = computed(() =>
      isError.value ? `${props.id}-error` : `${props.id}-input`
    );

    const hintText = computed(() => {
      if (errorText.value.length > 0) return errorText.value;
      if (!!props.hint) return props.hint;
      return '';
    });

    const hasHint = computed(() => !!hintText.value.length);

    return {
      hasHint,
      hintText,
      hintClass,
      hintId,
      dynamicClass,
      isError,
      autofocus: props.autofocus,
      vuelidate: props.vuelidate,
      updateValue,
    };
  },
});
</script>

and the updated form looks much better

Initial setup

We will be instantiating the Vuelidate object in Selections.vue instead of in JVPInput.vue. We do this because the JVPInput component is, in effect, simply a wrapper. We want to be able to use validation, but the rules and validation state for the purposes of form submission need to reside where the full form data resides. The first thing we need to do is install Vuelidate

npm install @vuelidate/core @vuelidate/validators

From here we can either incorporate it globally in the project or import it into each component we want to use it. We will use Vuelidate in the latter way. We first import the library and necessary validators into our component

import useVuelidate from '@vuelidate/core';
import { required, maxLength } from '@vuelidate/validators';

Then we instantiate the object and set the validation rules for the symbol attribute of the form

const rules = {
  symbol: { required, maxLength: maxLength(5) },
};
const v$ = useVuelidate(rules, state);

where the state element is the reactive element that we've already set in the component. The above rules set the symbol attribute to be required and to be no longer than 5 characters, though you can set it to whatever you want.

Custom validators

We also want to check that if we've included data for both the startDate and endDate attributes that the former is earlier than the latter.

We first need to extend the rules that were initially created before

const rules = {
  symbol: { required, maxLength: maxLength(5) },
  startDate: {
    validateDateFormat,
    mustBeEarlierDate,
  },
  endDate: {
    validateDateFormat,
  },
};
const v$ = useVuelidate(rules, state });

The first thing we want to do is first check to see if the value passed in is a valid date.

const checkDateFormat = (param) => {
  if (!param) return true;
  return new Date(param).toString() !== 'Invalid Date';
};

const validateDateFormat = helpers.withMessage(
  'Please enter a valid date.',
  checkDateFormat
);

The checkDateFormat function follows methodology in the Custom error messages documentation on the Vuelidate docs.

Then we want to check that the value passed in is earlier than the reactive state's endDate value.

const mustBeEarlierDate = helpers.withMessage(
  'Start date must be earlier than end date.',
  (value) => {
    const endDate = computed(() => state.endDate);
    if (!value || !endDate.value) return true;
    if (!checkDateFormat(endDate.value)) return true;
    return new Date(value) < new Date(endDate.value)
  }
);

The mustBeEarlierDate function follows methodology in the Passing extra properties to validators documentation on the Vuelidate docs. We need to be careful, though, as we don't care about this validation if either of the dates is not included, but only if both are set.

We can now check to see that the functionality works properly by inputting valid and invalid values to the form and clicking the Get Chart button. We should see the triggered handleSubmit text any time we click the button except when both the start and end date being included and the start date is not strictly less than the end date.

The updated Selections.vue component should now look like this

<template>
  <form class="ml-5" @submit.prevent="handleSubmit">
    <div class="my-1">
      <JVPInput
        v-model="state.symbol"
        label="Symbol"
        id="symbol"
        name="symbol"
        type="text"
        placeholder="eg. MSFT"
        :vuelidate="v$.symbol"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.startDate"
        label="Start Date"
        id="start-date"
        name="startDate"
        type="text"
        :vuelidate="v$.startDate"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.endDate"
        label="End Date"
        id="end-date"
        name="endDate"
        type="text"
        :vuelidate="v$.endDate"
      />
    </div>
    <div class="my-1">
      <JVPSelect
        v-model="state.interval"
        label="Interval"
        id="interval"
        :options="intervals"
      />
    </div>
    <button type="submit" class="border-4 border-indigo-500">Get Chart</button>
  </form>
</template>

<script>
import { defineComponent, reactive, computed } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, maxLength, helpers } from '@vuelidate/validators';
import JVPInput from './JVPInput.vue';
import JVPSelect from './JVPSelect.vue';

export default defineComponent({
  components: { JVPInput, JVPSelect },
  setup() {
    const intervals = ['Daily', 'Weekly', 'Monthly'];

    const state = reactive({
      symbol: '',
      interval: 'Daily',
      startDate: '',
      endDate: '',
    });

    const mustBeEarlierDate = helpers.withMessage(
      'Start date must be earlier than end date.',
      (value) => {
        const endDate = computed(() => state.endDate);
        if (!value || !endDate.value) return true;
        if (!checkDateFormat(endDate.value)) return true;
        return new Date(value) < new Date(endDate.value);
      }
    );

    const checkDateFormat = (param) => {
      if (!param) return true;
      return new Date(param).toString() !== 'Invalid Date';
    };

    const validateDateFormat = helpers.withMessage(
      'Please enter a valid date.',
      checkDateFormat
    );

    const rules = {
      symbol: { required, maxLength: maxLength(5) },
      startDate: {
        validateDateFormat,
        mustBeEarlierDate,
      },
      endDate: {
        validateDateFormat,
      },
    };
    const v$ = useVuelidate(rules, state);

    const disabled = computed(() => {
      return v$.value.$invalid;
    });

    const handleSubmit = () => {
      v$.value.$validate();
      if (!v$.value.$invalid) {
        console.log('triggered handleSubmit');
      }
    };

    return {
      intervals,
      state,
      disabled,
      v$,
      handleSubmit,
    };
  },
});
</script>

Display error messages

This is all fine and good, but we need to somehow let the user know when the form is in an error state. In order to do this we need to add v$ to the return of the setup function in the component so that we can access it in the template and pass it down to the JVPInput.vue components. Next we need to update the props in the JVPInput.vue component to include this new object, which we'll simply call vuelidate. The props for this component should now look like

props: {
  type: {
    type: String,
    required: false,
    default: 'text',
  },
  placeholder: {
    type: String,
    required: false,
  },
  vuelidate: {
    type: Object,
    required: false,
    default: () => ({})
  },
  ...inputProps,
},

and we'll add in an extra attribute to each JVPInput instance in Selections.vue, calling the specific element of the v$ object. It will look something like

<JVPInput
  v-model="state.startDate"
  label="Start Date"
  id="start-date"
  name="startDate"
  type="text"
  :vuelidate="v$.startDate"
/>

Once this is done we can then set some computed properties in the JVPInput.vue component to check if the input is in an error state and, if it is, create a dynamic errorText element.

// Vuelidate is used as a validation library.
// We use built-in functionality to determine if any rules are violated
// as well as display of the associated error text
const isError = computed(() => props.vuelidate.$error);
const errorText = computed(() => {
  const messages =
    props.vuelidate.$errors?.map((err) => err.$message) ?? [];
  return messages.join(' ');
});

We then want to add the isError and errorText elements to the return statement in the setup function in JVPInput.vue and add in some markup to display the text if and only if there is an error. We can add in a simple <p> tag to conditionally display the error messages, and the updated JVPInput.vue component should look like

<template>
  <div>
    <label :for="id" class="block text-sm font-medium text-gray-700">
      {{ label }}
    </label>
    <div class="mt-1 relative rounded-md shadow-sm">
      <input
        :value="modelValue"
        :type="type"
        :name="id"
        :id="id"
        class="block w-full sm:text-sm rounded-md shadow-sm"
        @input="updateValue"
      />
    </div>
    <p v-if="isError">{{ errorText }}</p>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import inputProps from '../utils/input-props';

export default defineComponent({
  props: {
    type: {
      type: String,
      required: false,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: false,
    },
    vuelidate: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // This is simply cleaner than putting emit code in the HTML
    const updateValue = (e) => emit('update:modelValue', e.target.value);

    // Vuelidate is used as a validation library.
    // We use built-in functionality to determine if any rules are violated
    // as well as display of the associated error text
    const isError = computed(() => props.vuelidate.$error);
    const errorText = computed(() => {
      const messages =
        props.vuelidate.$errors?.map((err) => err.$message) ?? [];
      return messages.join(' ');
    });

    return { updateValue, isError, errorText };
  },
});
</script>

Now we can see that if we don't include a symbol, set the date fields to be random text, and click the Get Chart button then we should see something that looks like In the next article we'll add in hint text, then we'll add in some conditional styling based on whether the form is in an error state or not.

Custom JVPInput.vue Component

We start by creating a simple, generic component

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input
      :value="modelValue"
      :type="type"
      :name="id"
      :id="id"
      :placeholder="placeholder"
      class="mx-2 border"
      @input="updateValue"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import inputProps from '../utils/input-props';

export default defineComponent({
  props: {
    type: {
      type: String,
      required: false,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: false,
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // This is simply cleaner than putting emit code in the HTML
    const updateValue = (e) => emit('update:modelValue', e.target.value);

    return { updateValue };
  },
});
</script>

The functionality of the component is fairly simple: split up the v-model directive into :value and @input functionality, and use passed-in props for the type, id, and name.

We can see that it looks like some information is missing, namely the modelValue, id, and label values that are referenced within the template tag. These can be found in the inputProps object, which is defined in a separate file as

// input-props.js

export default {
  id: {
    type: String,
    required: true,
  },
  modelValue: {
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
  hint: {
    type: String,
    required: false,
    default: '',
  },
};

The hint that is included in input-props.js is something that will be used later.

Custom JVPSelect.vue Component

In a similar manner, but somewhat simpler, we create the JVPSelect.vue component

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <select :value="item" :id="id" class="mx-2 border" @input="updateItem">
      <option
        v-for="option in options"
        :key="option"
        :name="option"
        :selected="modelValue"
      >
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import inputProps from '../utils/input-props';

export default defineComponent({
  props: {
    options: {
      type: Array,
      required: true,
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const item = computed(() => props.modelValue);
    const updateItem = (e) => emit('update:modelValue', e.target.value);
    return { item, updateItem };
  },
});
</script>

Like the JVPInput.vue component, this is simply moving the functionality that existed in Selections.vue into its own component.

Updating Selections.vue

Now with these two components created we will update Selections.vue to utilize them. We then update Selections.vue to use this component instead of the generic input component.

<template>
  <form class="ml-5" @submit.prevent="handleSubmit">
    <div class="my-1">
      <JVPInput
        v-model="state.symbol"
        label="Symbol"
        id="symbol"
        name="symbol"
        type="text"
        placeholder="eg. MSFT"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.startDate"
        label="Start Date"
        id="start-date"
        name="startDate"
        type="text"
      />
    </div>
    <div class="my-1">
      <JVPInput
        v-model="state.endDate"
        label="End Date"
        id="end-date"
        name="endDate"
        type="text"
      />
    </div>
    <div class="my-1">
      <JVPSelect v-model="state.interval" label="Interval" id="interval" :options="intervals" />
    </div>
    <button type="submit" class="border">Get Chart</button>
  </form>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import JVPInput from './JVPInput.vue';
import JVPSelect from './JVPSelect.vue';

export default defineComponent({
  components: { JVPInput, JVPSelect },
  setup() {
    const intervals = ['Daily', 'Weekly', 'Monthly'];

    const state = reactive({
      symbol: '',
      interval: 'Daily',
      startDate: '',
      endDate: '',
    });

    const handleSubmit = () => {
      console.log('triggered handleSubmit');
    };

    return {
      intervals,
      state,
      handleSubmit,
    };
  },
});
</script>

and the app will look no different than before, which is the goal, but it will make further customization much easier.

Styling

As we saw in part 2, the general app look is fairly ugly. We'll show it again here for reference. We want to add some Tailwind styles to clean this up a little. In regard to the JVPSelect.vue component it won't make much difference than if we had left functionality in the Selections.vue component, but for organization it's better this way.

JVPSelect.vue

We'll add simple font styling to the label:

• block
• text-sm
• font-medium
• text-gray-700

and slightly more complex styling to the actual <select> tag:

• block
• w-full
• pl-3
• pr-10
• py-2
• mt-1
• text-base
• border-gray-300
• focus:outline-none
• focus:ring-indigo-500
• focus:border-indigo-500
• sm:text-sm
• rounded-md

To see what each of these classes do to the element I encourage you to check out the Tailwind docs. Full disclosure, though, I have purchased a license to Tailwind UI so a lot of this came from there because I'm terrible when it comes to design independently. Now, the updated JVPSelect.vue component looks like this

<template>
  <div>
    <label :for="id" class="block text-sm font-medium text-gray-700">
      {{ label }}
    </label>
    <select
      :value="item"
      :id="id"
      class="
        mt-1
        block
        w-full
        pl-3
        pr-10
        py-2
        text-base
        border-gray-300
        focus:outline-none focus:ring-indigo-500 focus:border-indigo-500
        sm:text-sm
        rounded-md
      "
      @input="updateItem"
    >
      <option
        v-for="option in options"
        :key="option"
        :name="option"
        :selected="modelValue"
      >
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import inputProps from '../utils/input-props';

export default defineComponent({
  props: {
    options: {
      type: Array,
      required: true,
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const item = computed(() => props.modelValue);
    const updateItem = (e) => emit('update:modelValue', e.target.value);
    return { item, updateItem };
  },
});
</script>

JVPInput.vue

This component is going to be slightly more complicated. One of the reasons for this is because we're going to be handling input validation in the JVPInput.vue component so we want to have <p> tag to display error messages or hints (remember the hint element in input-props.js???). We want the labels to match what we already created for JVPSelect.vue, though, so that will be the same. We will also wrap the <input> in a div element to make alignment a bit better as well as placement of any messages. To this div we will add just a couple of classes:

• mt-1
• relative
• rounded-md
• shadow-sm

and then to the actual input element we will add

• block
• w-full
• sm:text-sm
• rounded-md
• shadow-sm

Now the JVPInput.vue component looks like

<template>
  <div>
    <label :for="id" class="block text-sm font-medium text-gray-700">
      {{ label }}
    </label>
    <div class="mt-1 relative rounded-md shadow-sm">
      <input
        :value="modelValue"
        :type="type"
        :name="id"
        :id="id"
        class="block w-full sm:text-sm rounded-md shadow-sm"
        @input="updateValue"
      />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import inputProps from '../utils/input-props';

export default defineComponent({
  props: {
    type: {
      type: String,
      required: false,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: false,
    },
    ...inputProps,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // This is simply cleaner than putting emit code in the HTML
    const updateValue = (e) => emit('update:modelValue', e.target.value);

    return { updateValue };
  },
});
</script>

And in order to make the actual app look half decent, we'll add a bg-gray-200 class to the main div in App.vue and a px-4 class to the <Selections /> element in App.vue

<template>
  <div class="h-screen bg-gray-200">
    <Selections class="px-4"/>
  </div>
</template>

and the app now looks like which is still objectively terrible, but we're making progress. The benefit of what we've done in this step is that we will be able to compartmentalize the error display in the JVPInput.vue component and it will keep Selections.vue relatively clean.

In the next article we'll add input validation to the three JVPInput.vue elements, add error and hint message display, and add dynamic styling of the component itself for when it is in an error state.