Vue components for LU web template

This is the source for the node module @lu.se/vue-template.
For an example using this module see johandalabacka/vue-template-test.

!Example page

> NOTE (_October 2025_): This package was rewritten to use Vue's (and vue-i18n's use of) Composition API in version 3.2.0. If you need to use the legacy approach with the Options API you need use <=v3.1.5.

Example

App.vue (from vue-template-test)
``html



`

Setup

This package defines a Vue plugin that "auto-installs" the icons and internationalisation (i18n) strings the package itself needs. You can use that plugin and just define the i18n messages and icons you need for your app. Alternatively you can manually import what is needed. See below for the two approaches.

$3

All components use vue-i18n for internationalization.
The package's internationalization (i18n) strings need to be merged into your application's vue-i18n instance.

> Details: In order to not pollute your app's set of i18n strings more than necessary, all string keys from this package are prefixed with luvt (for _Lund University Vue template_). E.g. the full slug for the header's login string is: luvt.header.login.

To merge this package's i18n strings and your application's (as well as provide the icons), there are two ways:

1. Automatically merge through the Vue plugin defined by this package.
2. Do the merging manually yourself.

#### Approach #1: Vue plugin
For this approach you basically only need to add two lines:

`js
import luTemplate from '@lu.se/vue-template'
// ...
app.use(luTemplate, i18n)
`

From main.js (from vue-template-test), a demo app to show how to use this package:

`html

`

#### Approach #2: manual merging

If you want to have more control the package exports a messages object containing all translation strings used by the components. You can then merge these messages with your application's i18n configuration like below.

- N.B. that in this case you also need to import the icons for the package as well, included in the following code.

Using main.js (from vue-template-test) again as an example:
`html

`

$3

There exists translations for Swedish (sv) and English (en). The locale specification format used in this package is ISO 639.

> _Recap from above_: in order to not pollute your app's set of i18n strings more than necessary, all string keys from this package are prefixed with luvt (for _Lund University Vue template_). _\[..\]_

The translation keys are thus generally in this format:
`xml
luvt..
`

E.g. for the LuHeader component:

#### Header Component

- luvt.header.menu - Menu button label
- luvt.header.search - Search button/field label
- luvt.header.showHideSearch - Accessibility label for search toggle
- ...

#### ToTop Component

Some components only have one string and are thus only named with the slug:

- luvt.to_top - Back to top button label

Components

LuHeader, LuBreadCrumb, LuMain, LuFooter is to be at top level in your app.
The other components are used by them and you don't need to import them.

$3

This is the header of the page containing logo, search field, language switcher.
Optional menus one on the top and one below logo and search field.
Language switcher sets the key language in local storage to sv or en.

#### props

Name | Description | Default value
----|-----------|-------------
topmenu | menu on top of the page. If not set, the menu will not show | undefined
navbarmenu | menu below header. If not set, the menu will not show| undefined
mobilemenu | menu shown on mobile narrow pages | false
hasLogin | A login/logout button is added | false
isLoggedIn | Is user logged in (show login or logout) | false
avatar | show first two letters of string instead of logout icon | ''
hasSearch | A search field is added | false
emptySearch | Search field is emptied after search | false
searchPlaceholder | Placeholder for search field | ''
logoSrc | URL for the image | ''
logoTitle | title and alt text | ''
logoUrl | URL then clicking the logo | ''
compact | Less padding on height | false

$3

Name|Payload|Description
----|-----------|-------------
@login | -- | User has clicked log in
@logout | -- | User has clicked log out
@search | "search string" | User has made a search

$3

Uses router to create a breadcrump of current and all parent pages. This component is optional.
It uses no props and takes all information from the router.

$3

#### props

Name | Description | Default value
----|-----------|-------------
leftmenu | Menu to the left. If not set will the menu not show and content will use the whole width. | null
lastUpdated | Date of last update | ''
pageManagerMail | Mail address of page manager | ''
pageManagerNotice | Notice under the page manager / date | ''
compact | Less padding on top | false

#### slots

Name | Description
----|-----------
default | content of page

$3

A row with space for an optional right column. Is used inside LuMain. You can have several rows stacked on each other.

#### slots

Name | Description
----|-----------
default | central content
right-column | content to the right. Goes below default content on smaller screens.

$3

#### props

Name | Description | Default value
----|-----------|-------------
contact | Object with the following properties name, box (number), zip, phone and mail | null
logoSrc | URL for the image | ''
logoTitle | title and alt text | ''
shortCuts | menu of shortcuts. Always contains t('luvt.footer.shortcuts'). | null

$3

A box which is usually inside the right-column slot of a LuRow.

#### props

Name | Description | Default value
----|-----------|-------------
title | The title of the box, _required prop_ | undefined

#### slots

Name | Description
----|-----------
default | content of the box

$3

A loading/waiting spinner.

#### props

Name | Description | Default value
----|-----------|-------------
text | text to show | t('luvt.spinner.loading')

$3

A button which is shown if page is scrolled a bit down (pageYOffset > 500).
No props or events.

Menu example

path are vue-router paths and url are ordinary a href:s.

`javascript
export default [{
id: 'start',
label: 'start',
path: '/',
},
{
id: 'lu',
label: 'lu',
url: 'http://www.lu.se',
},
{
id: 'admin',
label: 'admin',
children: [
{
id: 'page1',
label: 'page1',
path: '/page1',
},
],
},
{
id: 'page2',
label: 'page2',
path: '/page2',
children: [{
id: 'page3',
label: 'page3',
path: '/page2/page3',
},
{
id: 'page4',
label: 'page4',
path: '/page2/page4',
},
{
id: 'google',
label: 'google',
url: 'https://www.google.com',
}],
}]
`

All items in menu should have a unique id, a label and a path (internal page) or url (external page).
In the router definition, if meta.title for a route is defined that is used as the title of page instead of the route's name.

How-to install

To use it in a project, e.g. with npm:

`bash
npm add '@lu.se/vue-template'
`

$3

Get a hold of the LU webmall (unfortunately not publically available anymore), unpack it and rename the folder to lumall and put it in the public folder.

$3

Please refer to their documentation here and here.

$3

`html



















``

Then refer to the Setup section above.