Can I use this libraries on cdn or other way, instead npm install

[bosemian]

Hi enesser, my project is very small. I don't create that via npm, So I can use this vCards-js on CDN ?, Thank you :)

[enesser]

@bosemian Yes, that shouldn't be a problem.

[bosemian]

@enesser Great, but I can not see this libraries on https://cdnjs.com/libraries.

[alt-win]

Yesss. CDN support please! What's the link to the CDN @enesser?

[vijaysolankiii]

@enesser Any update ?

[pascalwengerter]

Does https://unpkg.com/browse/vcards-js@2.10.0/index.js work for any of y'all?

[vesper8]

I think this is the correct url to use: https://unpkg.com/vcards-js@2.10.0/index.js

but I can't figure out how to actually use that inside my Vue component

[pascalwengerter]

@vesper8 I ended up rolling my own solution, not exactly proud of it but it works. It lives in a composable and gets called via a @click handler

interface Profile {
  id: string;
  address: string;
  email: string;
  firstName: string;
  lastName: string;
  title: string;
  titleEn: string;
  phoneCell?: string;
  phoneWork?: string;
  profilePicture?: string;

  expand: {
    works_at: {
      street: string;
      city: string;
      country: string;
    };
    works_in: {
      id: string;
      name: string;
    };
  };
}

const makeVCardInfo = (info: string) => `N:${info}\r\n`;
const makeVCardName = (name: string) => `FN:${name}\r\n`;
const makeVCardOrg = (org: string) => `ORG:${org}\r\n`;
const makeVCardTitle = (title: string) => `TITLE:${title}\r\n`;
const makeVCardTel = (type: string, number: string | undefined) =>
  number && `TEL;TYPE=${type}:${number}\r\n`;
const makeVCardAdr = (address: string) => `ADR;TYPE=WORK,PREF:;;${address}\r\n`;
const makeVCardEmail = (email: string) => `EMAIL:${email}\r\n`;
const makeVCardTimeStamp = () => `REV:${new Date().toISOString()}\r\n`;

export default function (profile: Profile) {
  const vcard =
    "BEGIN:VCARD\r\nVERSION:3.0\r\n" +
    makeVCardInfo(`${profile.lastName};${profile.firstName};`) +
    makeVCardName(`${profile.firstName} ${profile.lastName}`) +
    makeVCardOrg(profile.expand.works_in.name) +
    makeVCardTitle(profile.title) +
    makeVCardAdr(
      `${profile.expand.works_at.street}, ${profile.expand.works_at.city}, ${profile.expand.works_at.country}`
    ) +
    makeVCardEmail(profile.email) +
    makeVCardTel("WORK", profile.phoneWork) +
    makeVCardTel("CELL", profile.phoneCell) +
    makeVCardTimeStamp() +
    "END:VCARD";

  const a = document.createElement("a");
  const file = new Blob([vcard], { type: "text/vcard" });
  const sanitizedName = sanitizeName(profile.firstName, profile.lastName);

  a.href = URL.createObjectURL(file);
  a.download = `vcard-${sanitizedName}.vcf`;
  a.click();

  URL.revokeObjectURL(a.href);
}