
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
@datagouv/components-next
Advanced tools
In this document, "the user" is the application using `@datagouv/components` (for example: `cdata` or `udata-front-kit`). For general project setup and development, see the [main project README](../README.md).
In this document, "the user" is the application using @datagouv/components
(for example: cdata
or udata-front-kit
). For general project setup and development, see the main project README.
@datagouv/components
provides a Vue plugin to load the configuration.
import { datagouv } from '@datagouv/components-next'
app.use(datagouv, {
name: 'data.gouv.fr', // Name of the site in some texts
baseUrl: 'https://www.data.gouv.fr', // Used for redirects
apiBase: 'https://www.data.gouv.fr', // Used for API calls (could default to `baseUrl`?)
})
To use the Toggletip
component you should add a <div id="tooltips" />
in your layout.
Nuxt is a special environment (both server and browser) and requires some special functions and components to work.
import { TextClamp } from '#components'
import CdataLink from './components/CdataLink.vue'
import { datagouv, type UseFetchFunction } from '@datagouv/components-next'
const runtimeConfig = useRuntimeConfig()
app.vueApp.use(datagouv, {
// These are the same as above…
name: runtimeConfig.public.title,
baseUrl: runtimeConfig.public.i18n.baseUrl,
apiBase: runtimeConfig.public.apiBase,
devApiKey: runtimeConfig.public.devApiKey,
// ----------------------------------------
// --- Special functions and components ---
// Tell `@datagouv/components` to use `useFetch` from Nuxt instead of custom built-in.
customUseFetch: useFetch as UseFetchFunction,
// Nuxt doesn't like `TextClamp` in the server, provides the client only `TextClamp`
textClamp: TextClamp,
// The following properties allow to provide components specific to Nuxt.
// This `appLink` component will receive the raw link (without i18n prefix)
// and needs to add it.
appLink: CdataLink,
// The ClientOnly allow to disable SSR for some components.
clientOnly: ClientOnly,
})
@datagouv/components
is using TailwindCSS and some DSFR right now. The user needs to provide the correct version of the DSFR. Concerning TailwindCSS, there are two modes:
@import "@datagouv/components-next/assets/main.css";
, then build the CSS via TailwindCSS CLI or Vite plugin.@import '@datagouv/components-next/dist/components.css';
. Note @dev, this file should be built before publishing the package to NPM with npm run css
. For more details on the technology stack, see the main README.@datagouv/components
is using vue-i18n
to provide internationalisation. As always, there are two modes:
nuxt.config.ts
{
code: 'fr',
language: 'fr',
files: ['fr-FR.json', '../../node_modules/@datagouv/components-next/src/locales/fr.json'],
},
Nuxt is responsible for building the JSON file to the correct vue-i18n
JS format.
datagouv
Vue plugin. The plugin will then merge the already built messages's files.Suspense
To work with Nuxt, some components are doing HTTP requests during the setup
function (Nuxt can then do SSR for these requests: doing these requests server-side). These components need to be wrapped in a <Suspense>
wrapper (you can even provide a #fallback
). You can either wrap individual components inside <Suspense>
or wrap your entire application/layout in <Suspense>
<Suspense>
<DatasetInformationPanel v-if="dataset" :dataset="dataset" />
</Suspense>
For general development guidelines and contributing, see the contributing section in the main README.
This component library uses both ESLint and Prettier for code quality and formatting:
npm run lint # Lint and auto-fix ESLint issues
npm run format # Format code with Prettier
Note: Make sure to run both commands before submitting contributions to ensure consistent code style.
You can use the config with the composable useComponentsConfig()
.
import { useComponentsConfig } from '../main'
const config = useComponentsConfig()
[!WARNING]
In@datagouv/components
there are a few functions and components we cannot use directly:
TextClamp
componentuseFetch
Nuxt function
To use these, you need to get them from the config or via special wrappers.
useFetch
import { useFetch } from '../functions/api'
const { data: allLicenses } = await useFetch<Array<License>>('/api/1/datasets/licenses/')
This wrapper will use the provided useFetch
function from Nuxt or a custom built-in replacement (should work in most of the case but is a really simplify version of the Nuxt one).
TextClamp
Use the component from the config (could add a wrapper in the future to simplify this).
import { useComponentsConfig } from '../main'
const config = useComponentsConfig()
<component
:is="config.textClamp"
v-if="config && config.textClamp"
class="fr-mx-1v"
:auto-resize="true"
:text="organization.name"
:max-lines="1"
/>
[!NOTE]
Nuxt doesn't even allow to load thevue3-text-clamp
library in the server so we need to use dynamic import in the plugin config to be sure it's only loaded on non-Nuxt environment.
To do links in the application you can use the <AppLink>
component. Not sure why it's required. Maybe we could always use a <RouterLink>
from vue-router
since every user is using vue-router
? I think it's useful to add lang prefix to links but it's not done yet? Need testing.
Maybe this component shouldn't be exposed too, because I don't know why a user should use this instead of their own component (<RouterLink>
or <CdataLink>
…)
This component library is licensed under the MIT License, which is the same as the main project. This allows for permissive usage of the components in other projects.
For more details, see the LICENSE file in the main project directory.
FAQs
In this document, "the user" is the application using `@datagouv/components` (for example: `cdata` or `udata-front-kit`). For general project setup and development, see the [main project README](../README.md).
The npm package @datagouv/components-next receives a total of 12 weekly downloads. As such, @datagouv/components-next popularity was classified as not popular.
We found that @datagouv/components-next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.