@umn-latis/cla-vue-template
v3.0.0
Published
Basic layout for CLA (LATIS) VueJS apps
Readme
CLA Vue Templates
This repository contains basic Vue3 components for the College of Liberal Arts web template. This includes the header with navigation, footer, and the main content container (or "PostIt").
Installation
Add the package to your project using npm or yarn:
npm install @umn-latis/cla-vue-templateUsage
Import the global stylesheet into your application's js entrypoint (or your main css file):
// application.ts
import "@umn-latis/cla-vue-template/dist/style.css";Once the global stylesheet is imported, you can use the components within any other .vue file:
// App.vue
import { AppHeader, AppFooter } from "@umn-latis/cla-vue-template";Usage within blade and erb templates
You can also use the components "globally" within your templates.
Prep your build tool
To use the components outside of a .vue single file component (SFC), you'll need to configure your build tool (e.g. Vite) so that it uses vue.esm-bundler.js for vue. With Vite, you'll alias vue to vue/dist/vue.esm-bundler.js, like so:
// vite.config.js
import { defineConfig } from "vite";
import RubyPlugin from "vite-plugin-ruby";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [RubyPlugin(), vue()],
resolve: {
alias: {
// use vue's runtime compiler to support vue components
// directly within blade templates
vue: "vue/dist/vue.esm-bundler.js",
},
},
});Import components into your entrypoint
Once this is done, import your components into your entrypoint and make them globally available within your app:
// application.ts
import { createApp } from "vue";
import * as UMNComponents from "@umn-latis/cla-vue-template";
import "@umn-latis/cla-vue-template/dist/style.css";
const components = {
"umn-app-header": UMNComponents.AppHeader,
"umn-app-footer": UMNComponents.AppFooter,
};
// create the app with the components, mount it,
// then use the components anywhere within <div id="app">
createApp({ components }).mount("#app");Update Your Template file
Wrap your content with <div id="app">, so that you can use vue content any place within:
<!-- application.html.erb -->
<!DOCTYPE html>
<html lang="en">
<head>
... <%= vite_client_tag %> <%= vite_typescript_tag 'application' %>
</head>
<body>
+ <div id="app">
<div class="container"><%= flash_messages %> <%= yield %></div>
+ </div>
</body>
</html>Then use your components within the Vue app mount point:
<!-- application.html.erb -->
<!DOCTYPE html>
<html lang="en">
<head>
... <%= vite_client_tag %> <%= vite_typescript_tag 'application' %>
</head>
<body>
<div id="app">
+ <umn-app-header />
<div class="container"><%= flash_messages %> <%= yield %></div>
+ <umn-app-footer />
</div>
</body>
</html>Other usage notes
The AppHeader component has two named slots, to include the application title (with an optional link) as well as the nav components. See the AppHeader storybook story for an example of that view in production. The other components have no external props or slots. They should have no impact on the overall CSS of your application. As long as your application isn't setting styles on markup elements, it should be able to coexist with other UI libraries.
You probably want to wrap all of your components in a <div class="cla-template-wrapper"></div> block to set the minimum height to 100vh and ensure your footer is at the bottom.
Building and releasing the NPM package
You can build the npm package with npm run build. This will create the files and type definitions within /dist.
To test your local build, use npm link and then try it out on a local project of your choice.
To deploy the updated package, run npm run release and follow the prompts.