Ucla-library-website-components NPM

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.

Setup & Development

Setup

Make sure to install the dependencies:

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:5173:

# pnpm
pnpm run dev

Test component library package Server

Start the vite server on http://localhost:5174:

# pnpm
pnpm run serve

Test stories

Start the storybook on http://localhost:6006:

# pnpm
pnpm run storybook

Build vite component library

Build library using vite:

# pnpm
pnpm run vite

`App.vue` and `mock.js`

Local copy of `APP.vue` 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

@vuepic/vue-datepicker @vueuse/components @vueuse/core add-to-calendar-button date-fns lodash pinia vue3-carousel

@everything-registry/sub-chunk-3002 @infinitebrahmanuniverse/nolb-uc

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

This is the component library for the UCLA Library websites

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

Vue 3 + TypeScript + Vite

Recommended IDE Setup

Type Support For .vue Imports in TS

Setup & Development

Setup

Development Server

Test component library package Server

Test stories

Build vite component library

App.vue and mock.js

Local copy of APP.vue and mock.js in the src file

If starting this project from scratch

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

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

Update package.json in ftva-website-nuxt

OR

Link the two sites together

Type Support For `.vue` Imports in TS

`App.vue` and `mock.js`

Local copy of `APP.vue` and `mock.js` in the `src` file

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