@ucla-library-monorepo/ucla-library-website-compon

This is the component library for the UCLA Library websites

UCLA Library websites: library-website-nuxt & ftva-website-nuxt

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

Disable the built-in TypeScript Extension
1. Run Extensions: Show Built-in Extensions from VSCode's command palette
2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
Reload the VSCode window by running Developer: Reload Window from the command palette.

Storybook

UCLA Components

📥 Usage in Nuxt Projects as a vue component library

Installation

pnpm add --save-dev @ucla-library-monorepo/ucla-library-website-components or pnpm install

Update nuxt.config.ts Adding Global CSS

 css: [
   '@ucla-library-monorepo/ucla-library-website-components/style.css',
  ],

Importing Components

For direct imports:

import { ButtonLink } from '@ucla-library-monorepo/ucla-library-website-components'

📥 Usage in Vue Site as a vue component library

1. Install the Package

pnpm add @ucla-library-monorepo/ucla-library-website-components

2. Import the Components in Your Vue Project

In your main.ts (or main.js) file:

import { createApp } from 'vue'
import App from './App.vue'

// Import individual components
import { ButtonLink, SmartLink } from '@ucla-library/ucla-library-website-components'

// Import the component library's global styles
import '@ucla-library/ucla-library-website-components/style.css'

const app = createApp(App)

// Register individual components globally (optional)
app.component('ButtonLink', ButtonLink)
app.component('SmartLink', SmartLink)

app.mount('#app')

Alternatively, in each .vue file for better tree-shaking:

<script setup>
import { ButtonLink } from '@ucla-library/ucla-library-website-components'
</script>

<template>
  <ButtonLink label="Read More" />
</template>

Setup & Development

`App.vue` and `mock.js`

Local copy of `APP.vue`, `main.ts`, `index.html` and `mock.js` in the `src` file

If you already have a local copy of be sure to save it locally because they will be deleted if you reclone this repo. You can add a page to the Wiki with your version.

If starting this project from scratch

Be sure to add the APP.vue and mock.js in the src file

There are example files here: https://github.com/UCLALibrary/ucla-library-website-components/wiki/AppDotVueAndMockJS.md

If you get an error like this; you have forgotten to do this step:

(Add APP.vue and mock.js in the src file)

[plugin:vite:import-analysis] Failed to resolve import "./App.vue" from "src/main.ts". Does the file exist?
/Users/jendiamond/UCLA/ucla-library-website-components/src/main.ts:8:16
5  |  import "ucla-library-design-tokens/scss/app-global.scss";
6  |  import "@/styles/global.scss";
7  |  import App from "./App.vue";
   |                   ^
8  |  createApp(App).use(router).use(createPinia()).mount("#app");

src
  > assets
  > composables
  > lib-components
  > stores
  > stories
  > styles
  > types
  > utils
  App.vue
  entry.js
  main.ts
  mock.js
  router.js
  style.css
  vue-global-props.d.ts

To use your local components in the ftva-website-nuxt site locally

You have two choices

Update `package.json` in ftva-website-nuxt

from "ucla-library-website-components": "2.39.0-alpha.100" (whatever it is currently)

to "ucla-library-website-components": "file:../ucla-library-website-components" (whatever your path to ucla-library-website-components is)

OR

Link the two sites together

In your terminal, in ucla-library-website-components
1. Run: $pnpm run build
Then run: $pnpm link --global
On either the library-website-nuxt or the ftva-website-nuxt
1. Run: $pnpm link --global ucla-library-website-components
Now the repos are linked.
The add the new components to a page on either the library-website-nuxt or the ftva-website-nuxt and
1. Run: $pnpm run dev