Openverse Frontend


This repository is the frontend UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. for accessing and exploring the openly-licensed content provided by the Openverse API.

This document will give you a high level overview of the modules and components of the application and how they work together.

Top ↑


The OpenverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project. find Openverse at frontend is built using Vue.js as its main view library.

It uses Nuxt.js as a metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. framework to handle several key functions:

  • Server Side rendering in production
  • Lifecycle methods for data fetching on client and server-side page loads
  • Building the application for production

If something in the codebase confuses you, it may be a feature of Nuxt.js, so make sure you check out their documentation.

Nuxt.js is built on top of standard libraries in the Vue.js ecosystem. It uses Vue-Router as its routing library and Vuex as state-management library.

Jest is used for unit tests. Playwright is used for end-to-end (e2e) tests, to simulate the user experience and make sure all of our unit-tested components are working in harmony.

Top ↑

Basic repository structure

Top ↑

In the project root

The root of the repository contains several configuration files for code formatting, and configuration, for Prettier, Nuxt, Docker, ESLint, and other config files.

nuxt.config.js is an important file. It contains several key pieces of configuration. You can read more about the Nuxt.js config file here.

  • environment variables are set in the export const env = {} object. Variables are set with camel case names like this process.env.varNameGoesHere and their default values are formatted in the more conventional process.env.VAR_NAME_GOES_HERE format.
  • Default HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. metadata and Nuxt plugins are added.
  • /src All JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. code lives in the src directory.

Top ↑


Internationalization (usually abbreviated as i18n) of the site is handled by Nuxt i18n module which is integrated with the Vue-i18n pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party.

To ensure best experience for international users, make sure to take the following steps when adding new content:

Last updated: