@utrecht/web-component-library-vue NPM | npm.io

1.0.3-alpha.33 • Published 3 days ago

Install

Weekly downloads

-

License

EUPL-1.2

Repository

Last release

3 days ago

Web Components in Vue.js

The @utrecht/web-component-library-stencil package contains the actual implementation of every web component, while the @utrecht/web-component-library-vue only contains wrapper Vue.js 3 components to help validate all the templates, and some supporting code to support Vue.js form bindings. The implementation of each component will be loaded separately and on-demand, so including the entire component library will not slow down your application.

Install both packages to use Vue.js components in your project:

npm install --save-dev --save-exact \
  @utrecht/web-component-library-vue \
  @utrecht/web-component-library-stencil

For example, in your App.vue:

<template>
  <utrecht-heading-1>Login</utrecht-heading-1>
  <form action="/login" method="post">
    <utrecht-form-field-textbox v-model="username" autocomplete="username">Username</utrecht-form-field-textbox>
    <utrecht-form-field-textbox v-model="password" autocomplete="current-password" type="password"
      >Password</utrecht-form-field-textbox
    >
    <div>
      <utrecht-button type="submit">Login</utrecht-button>
    </div>
  </form>
</template>

<script>
  import { UtrechtButton, UtrechtFormFieldTextbox, UtrechtHeading1 } from "@utrecht/web-component-library-vue";

  export default {
    components: {
      "utrecht-button": UtrechtButton,
      "utrecht-form-field-textbox": UtrechtFormFieldTextbox,
      "utrecht-heading-1": UtrechtHeading1,
    },
    data() {
      return {
        username: "",
        password: "",
      };
    },
  };
</script>

Since the implementation of the web components needs to be loaded in the browser, include the following effect to import web component library from @utrecht/web-component-library-stencil, for example in your main.js:

import "@utrecht/design-tokens/dist/index.css";
import { defineCustomElements } from "@utrecht/web-component-library-stencil/loader";

createApp(App).use(router).mount("#app");

defineCustomElements();

nl-design-system

@utrecht/web-component-library-stencil

@everything-registry/sub-chunk-973 @infinitebrahmanuniverse/nolb-_ut @zalastax/nolb-_ut

4 days ago

3 days ago

8 days ago

9 days ago

10 days ago

30 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

1.0.0-alpha.479

10 months ago

1.0.0-alpha.478

10 months ago

1.0.0-alpha.477

10 months ago

1.0.0-alpha.483

9 months ago

1.0.0-alpha.482

9 months ago

1.0.0-alpha.481

10 months ago

1.0.0-alpha.480

10 months ago

1.0.0-alpha.487

9 months ago

1.0.0-alpha.486

9 months ago

1.0.0-alpha.485

9 months ago

1.0.0-alpha.484

9 months ago

1.0.0-alpha.489

9 months ago

1.0.0-alpha.488

9 months ago

1.0.0-alpha.490

9 months ago

1.0.0-alpha.494

8 months ago

1.0.0-alpha.493

8 months ago

1.0.0-alpha.492

9 months ago

1.0.0-alpha.491

9 months ago

1.0.0-alpha.498

8 months ago

1.0.0-alpha.497

8 months ago

1.0.0-alpha.496

8 months ago

1.0.0-alpha.495

8 months ago

1.0.0-alpha.499

8 months ago

6 months ago

1.0.0-alpha.506

8 months ago

1.0.0-alpha.505

8 months ago

1.0.0-alpha.504

8 months ago

1.0.0-alpha.503

8 months ago

1.0.0-alpha.509

8 months ago

1.0.0-alpha.508

8 months ago

1.0.0-alpha.507

8 months ago

1.0.0-alpha.502

8 months ago

1.0.0-alpha.501

8 months ago

1.0.0-alpha.500

8 months ago

1.0.0-alpha.516

8 months ago

1.0.0-alpha.515

8 months ago

1.0.0-alpha.514

8 months ago

1.0.0-alpha.518

8 months ago

1.0.0-alpha.513

8 months ago

1.0.0-alpha.512

8 months ago

1.0.0-alpha.511

8 months ago

1.0.0-alpha.510

8 months ago

6 months ago

6 months ago

1.0.0-alpha.549

7 months ago

6 months ago

1.0.0-alpha.548

7 months ago

1.0.0-alpha.547

7 months ago

1.0.0-alpha.542

7 months ago

1.0.0-alpha.541

7 months ago

1.0.0-alpha.540

7 months ago

6 months ago

1.0.0-alpha.546

7 months ago

1.0.0-alpha.545

7 months ago

1.0.0-alpha.544

7 months ago

1.0.0-alpha.543

7 months ago

1.0.0-alpha.528

7 months ago

1.0.0-alpha.527

7 months ago

1.0.0-alpha.526

7 months ago

1.0.0-alpha.525

7 months ago

1.0.0-alpha.529

7 months ago

1.0.0-alpha.520

7 months ago

1.0.0-alpha.524

7 months ago

1.0.0-alpha.523

7 months ago

1.0.0-alpha.522

7 months ago

1.0.0-alpha.521

7 months ago

1.0.0-alpha.539

7 months ago

1.0.0-alpha.538

7 months ago

1.0.0-alpha.537

7 months ago

1.0.0-alpha.536

7 months ago

1.0.0-alpha.531

7 months ago

1.0.0-alpha.530

7 months ago

1.0.0-alpha.535

7 months ago

1.0.0-alpha.534

7 months ago

1.0.0-alpha.533

7 months ago

1.0.0-alpha.532

7 months ago

1.0.0-alpha.461

12 months ago

1.0.0-alpha.460

12 months ago

1.0.0-alpha.465

12 months ago

1.0.0-alpha.464

12 months ago

1.0.0-alpha.463

12 months ago

1.0.0-alpha.462

12 months ago

1.0.0-alpha.469

11 months ago

1.0.0-alpha.468

11 months ago

1.0.0-alpha.467

11 months ago

1.0.0-alpha.466

11 months ago

1.0.0-alpha.472

11 months ago

1.0.0-alpha.471

11 months ago

1.0.0-alpha.470

11 months ago

1.0.0-alpha.476

11 months ago

1.0.0-alpha.475

11 months ago

1.0.0-alpha.474

11 months ago

1.0.0-alpha.473

11 months ago

1.0.0-alpha.449

12 months ago

1.0.0-alpha.448

12 months ago

1.0.0-alpha.447

12 months ago

1.0.0-alpha.459

12 months ago

1.0.0-alpha.450

12 months ago

1.0.0-alpha.454

12 months ago

1.0.0-alpha.453

12 months ago

1.0.0-alpha.452

12 months ago

1.0.0-alpha.451

12 months ago

1.0.0-alpha.458

12 months ago

1.0.0-alpha.457

12 months ago

1.0.0-alpha.456

12 months ago

1.0.0-alpha.455

12 months ago

1.0.0-alpha.443

1 year ago

1.0.0-alpha.442

1 year ago

1.0.0-alpha.441

1 year ago

1.0.0-alpha.440

1 year ago

1.0.0-alpha.446

12 months ago

1.0.0-alpha.445

1 year ago

1.0.0-alpha.444

1 year ago

1.0.0-alpha.393

1 year ago

1.0.0-alpha.392

1 year ago

1.0.0-alpha.399

1 year ago

1.0.0-alpha.398

1 year ago

1.0.0-alpha.397

1 year ago

1.0.0-alpha.396

1 year ago

1.0.0-alpha.429

1 year ago

1.0.0-alpha.428

1 year ago

1.0.0-alpha.427

1 year ago

1.0.0-alpha.426

1 year ago

1.0.0-alpha.421

1 year ago

1.0.0-alpha.425

1 year ago

1.0.0-alpha.424

1 year ago

1.0.0-alpha.423

1 year ago

1.0.0-alpha.422

1 year ago

1.0.0-alpha.439

1 year ago

1.0.0-alpha.438

1 year ago

1.0.0-alpha.437

1 year ago

1.0.0-alpha.432

1 year ago

1.0.0-alpha.431

1 year ago

1.0.0-alpha.430

1 year ago

1.0.0-alpha.436

1 year ago

1.0.0-alpha.435

1 year ago

1.0.0-alpha.434

1 year ago

1.0.0-alpha.433

1 year ago

1.0.0-alpha.407

1 year ago

1.0.0-alpha.406

1 year ago

1.0.0-alpha.405

1 year ago

1.0.0-alpha.404

1 year ago

1.0.0-alpha.409

1 year ago

1.0.0-alpha.408

1 year ago

1.0.0-alpha.403

1 year ago

1.0.0-alpha.402

1 year ago

1.0.0-alpha.401

1 year ago

1.0.0-alpha.400

1 year ago

1.0.0-alpha.418

1 year ago

1.0.0-alpha.417

1 year ago

1.0.0-alpha.416

1 year ago

1.0.0-alpha.415

1 year ago

1.0.0-alpha.419

1 year ago

1.0.0-alpha.410

1 year ago

1.0.0-alpha.414

1 year ago

1.0.0-alpha.413

1 year ago

1.0.0-alpha.412

1 year ago

1.0.0-alpha.411

1 year ago

1.0.0-alpha.380

1 year ago

1.0.0-alpha.384

1 year ago

1.0.0-alpha.383

1 year ago

1.0.0-alpha.382

1 year ago

1.0.0-alpha.381

1 year ago

1.0.0-alpha.388

1 year ago

1.0.0-alpha.387

1 year ago

1.0.0-alpha.386

1 year ago

1.0.0-alpha.385

1 year ago

1.0.0-alpha.389

1 year ago

1.0.0-alpha.391

1 year ago

1.0.0-alpha.390

1 year ago

1.0.0-alpha.373

1 year ago

1.0.0-alpha.372

1 year ago

1.0.0-alpha.371

1 year ago

1.0.0-alpha.377

1 year ago

1.0.0-alpha.376

1 year ago

1.0.0-alpha.375

1 year ago

1.0.0-alpha.374

1 year ago

1.0.0-alpha.379

1 year ago

1.0.0-alpha.378

1 year ago

1.0.0-alpha.349

1 year ago

1.0.0-alpha.340

1 year ago

1.0.0-alpha.344

1 year ago

1.0.0-alpha.343

1 year ago

1.0.0-alpha.342

1 year ago

1.0.0-alpha.341

1 year ago

1.0.0-alpha.348

1 year ago

1.0.0-alpha.347

1 year ago

1.0.0-alpha.346

1 year ago

1.0.0-alpha.345

1 year ago

1.0.0-alpha.351

1 year ago

1.0.0-alpha.350

1 year ago

1.0.0-alpha.355

1 year ago

1.0.0-alpha.354

1 year ago

1.0.0-alpha.353

1 year ago

1.0.0-alpha.352

1 year ago

1.0.0-alpha.359

1 year ago

1.0.0-alpha.358

1 year ago

1.0.0-alpha.357

1 year ago

1.0.0-alpha.356

1 year ago

1.0.0-alpha.329

1 year ago

1.0.0-alpha.328

1 year ago

1.0.0-alpha.327

1 year ago

1.0.0-alpha.322

1 year ago

1.0.0-alpha.321

1 year ago

1.0.0-alpha.320

1 year ago

1.0.0-alpha.326

1 year ago

1.0.0-alpha.325

1 year ago

1.0.0-alpha.324

1 year ago

1.0.0-alpha.323

1 year ago

1.0.0-alpha.339

1 year ago

1.0.0-alpha.338

1 year ago

1.0.0-alpha.333

1 year ago

1.0.0-alpha.332

1 year ago

1.0.0-alpha.331

1 year ago

1.0.0-alpha.330

1 year ago

1.0.0-alpha.337

1 year ago

1.0.0-alpha.336

1 year ago

1.0.0-alpha.335

1 year ago

1.0.0-alpha.334

1 year ago

1.0.0-alpha.362

1 year ago

1.0.0-alpha.361

1 year ago

1.0.0-alpha.360

1 year ago

1.0.0-alpha.366

1 year ago

1.0.0-alpha.365

1 year ago

1.0.0-alpha.364

1 year ago

1.0.0-alpha.363

1 year ago

1.0.0-alpha.369

1 year ago

1.0.0-alpha.368

1 year ago

1.0.0-alpha.367

1 year ago

1.0.0-alpha.370

1 year ago

1.0.0-alpha.299

2 years ago

1.0.0-alpha.308

2 years ago

1.0.0-alpha.307

2 years ago

1.0.0-alpha.306

2 years ago

1.0.0-alpha.305

2 years ago

1.0.0-alpha.309

2 years ago

1.0.0-alpha.300

2 years ago

1.0.0-alpha.304

2 years ago

1.0.0-alpha.303

2 years ago

1.0.0-alpha.302

2 years ago

1.0.0-alpha.301

2 years ago

1.0.0-alpha.319

1 year ago

1.0.0-alpha.318

2 years ago

1.0.0-alpha.317

2 years ago

1.0.0-alpha.316

2 years ago

1.0.0-alpha.311

2 years ago

1.0.0-alpha.310

2 years ago

1.0.0-alpha.315

2 years ago

1.0.0-alpha.314

2 years ago

1.0.0-alpha.313

2 years ago

1.0.0-alpha.312

2 years ago

1.0.0-alpha.298

2 years ago

1.0.0-alpha.229

2 years ago

1.0.0-alpha.228

2 years ago

1.0.0-alpha.223

2 years ago

1.0.0-alpha.222

2 years ago

1.0.0-alpha.221

2 years ago

1.0.0-alpha.220

2 years ago

1.0.0-alpha.227

2 years ago

1.0.0-alpha.226

2 years ago

1.0.0-alpha.225

2 years ago

1.0.0-alpha.224

2 years ago

1.0.0-alpha.239

2 years ago

1.0.0-alpha.230

2 years ago

1.0.0-alpha.234

2 years ago

1.0.0-alpha.233

2 years ago

1.0.0-alpha.232

2 years ago

1.0.0-alpha.231

2 years ago

1.0.0-alpha.238

2 years ago

1.0.0-alpha.237

2 years ago

1.0.0-alpha.236

2 years ago

1.0.0-alpha.235

2 years ago

1.0.0-alpha.209

2 years ago

1.0.0-alpha.208

2 years ago

1.0.0-alpha.207

2 years ago

1.0.0-alpha.206

2 years ago

1.0.0-alpha.205

2 years ago

1.0.0-alpha.204

2 years ago

1.0.0-alpha.203

2 years ago

1.0.0-alpha.219

2 years ago

1.0.0-alpha.218

2 years ago

1.0.0-alpha.217

2 years ago

1.0.0-alpha.212

2 years ago

1.0.0-alpha.211

2 years ago

1.0.0-alpha.210

2 years ago

1.0.0-alpha.216

2 years ago

1.0.0-alpha.215

2 years ago

1.0.0-alpha.214

2 years ago

1.0.0-alpha.213

2 years ago

1.0.0-alpha.263

2 years ago

1.0.0-alpha.262

2 years ago

1.0.0-alpha.261

2 years ago

1.0.0-alpha.260

2 years ago

1.0.0-alpha.267

2 years ago

1.0.0-alpha.266

2 years ago

1.0.0-alpha.265

2 years ago

1.0.0-alpha.264

2 years ago

1.0.0-alpha.269

2 years ago

1.0.0-alpha.268

2 years ago

1.0.0-alpha.270

2 years ago

1.0.0-alpha.274

2 years ago

1.0.0-alpha.273

2 years ago

1.0.0-alpha.272

2 years ago

1.0.0-alpha.271

2 years ago

1.0.0-alpha.278

2 years ago

1.0.0-alpha.277

2 years ago

1.0.0-alpha.276

2 years ago

1.0.0-alpha.275

2 years ago

1.0.0-alpha.279

2 years ago

1.0.0-alpha.241

2 years ago

1.0.0-alpha.240

2 years ago

1.0.0-alpha.245

2 years ago

1.0.0-alpha.244

2 years ago

1.0.0-alpha.243

2 years ago

1.0.0-alpha.242

2 years ago

1.0.0-alpha.249

2 years ago

1.0.0-alpha.248

2 years ago

1.0.0-alpha.247

2 years ago

1.0.0-alpha.246

2 years ago

1.0.0-alpha.252

2 years ago

1.0.0-alpha.251

2 years ago

1.0.0-alpha.250

2 years ago

1.0.0-alpha.256

2 years ago

1.0.0-alpha.255

2 years ago

1.0.0-alpha.254

2 years ago

1.0.0-alpha.253

2 years ago

1.0.0-alpha.259

2 years ago

1.0.0-alpha.258

2 years ago

1.0.0-alpha.257

2 years ago

1.0.0-alpha.281

2 years ago

1.0.0-alpha.280

2 years ago

1.0.0-alpha.285

2 years ago

1.0.0-alpha.284

2 years ago

1.0.0-alpha.283

2 years ago

1.0.0-alpha.282

2 years ago

1.0.0-alpha.289

2 years ago

1.0.0-alpha.288

2 years ago

1.0.0-alpha.287

2 years ago

1.0.0-alpha.286

2 years ago

1.0.0-alpha.292

2 years ago

1.0.0-alpha.291

2 years ago

1.0.0-alpha.290

2 years ago

1.0.0-alpha.296

2 years ago

1.0.0-alpha.295

2 years ago

1.0.0-alpha.294

2 years ago

1.0.0-alpha.293

2 years ago

1.0.0-alpha.297

2 years ago

1.0.0-alpha.201

2 years ago

1.0.0-alpha.200

2 years ago

1.0.0-alpha.202

2 years ago

1.0.0-alpha.182

2 years ago

1.0.0-alpha.181

2 years ago

1.0.0-alpha.186

2 years ago

1.0.0-alpha.185

2 years ago

1.0.0-alpha.184

2 years ago

1.0.0-alpha.183

2 years ago

1.0.0-alpha.189

2 years ago

1.0.0-alpha.188

2 years ago

1.0.0-alpha.187

2 years ago

1.0.0-alpha.193

2 years ago

1.0.0-alpha.192

2 years ago

1.0.0-alpha.191

2 years ago

1.0.0-alpha.190

2 years ago

1.0.0-alpha.197

2 years ago

1.0.0-alpha.196

2 years ago

1.0.0-alpha.195

2 years ago

1.0.0-alpha.194

2 years ago

1.0.0-alpha.199

2 years ago

1.0.0-alpha.198

2 years ago

1.0.0-alpha.180

2 years ago

1.0.0-alpha.169

2 years ago

1.0.0-alpha.171

2 years ago

1.0.0-alpha.170

2 years ago

1.0.0-alpha.175

2 years ago

1.0.0-alpha.174

2 years ago

1.0.0-alpha.173

2 years ago

1.0.0-alpha.172

2 years ago

1.0.0-alpha.179

2 years ago

1.0.0-alpha.178

2 years ago

1.0.0-alpha.177

2 years ago

1.0.0-alpha.176

2 years ago

1.0.0-alpha.160

2 years ago

1.0.0-alpha.164

2 years ago

1.0.0-alpha.163

2 years ago

1.0.0-alpha.162

2 years ago

1.0.0-alpha.161

2 years ago

1.0.0-alpha.168

2 years ago

1.0.0-alpha.167

2 years ago

1.0.0-alpha.166

2 years ago

1.0.0-alpha.165

2 years ago

1.0.0-alpha.142

2 years ago

1.0.0-alpha.141

2 years ago

1.0.0-alpha.140

2 years ago

1.0.0-alpha.146

2 years ago

1.0.0-alpha.145

2 years ago

1.0.0-alpha.144

2 years ago

1.0.0-alpha.143

2 years ago

1.0.0-alpha.149

2 years ago

1.0.0-alpha.148

2 years ago

1.0.0-alpha.147

2 years ago

1.0.0-alpha.153

2 years ago

1.0.0-alpha.152

2 years ago

1.0.0-alpha.151

2 years ago

1.0.0-alpha.150

2 years ago

1.0.0-alpha.157

2 years ago

1.0.0-alpha.156

2 years ago

1.0.0-alpha.155

2 years ago

1.0.0-alpha.154

2 years ago

1.0.0-alpha.159

2 years ago

1.0.0-alpha.158

2 years ago

1.0.0-alpha.139

2 years ago

1.0.0-alpha.138

2 years ago

1.0.0-alpha.137

2 years ago

1.0.0-alpha.135

2 years ago

1.0.0-alpha.134

2 years ago

1.0.0-alpha.133

2 years ago

1.0.0-alpha.132

2 years ago

1.0.0-alpha.136

2 years ago

1.0.0-alpha.129

2 years ago

1.0.0-alpha.124

2 years ago

1.0.0-alpha.123

2 years ago

1.0.0-alpha.122

2 years ago

1.0.0-alpha.128

2 years ago

1.0.0-alpha.127

2 years ago

1.0.0-alpha.126

2 years ago

1.0.0-alpha.125

2 years ago

1.0.0-alpha.131

2 years ago

1.0.0-alpha.130

2 years ago

1.0.0-alpha.109

2 years ago

1.0.0-alpha.108

2 years ago

1.0.0-alpha.107

2 years ago

1.0.0-alpha.102

2 years ago

1.0.0-alpha.101

2 years ago

1.0.0-alpha.100

2 years ago

1.0.0-alpha.106

2 years ago

1.0.0-alpha.105

2 years ago

1.0.0-alpha.104

2 years ago

1.0.0-alpha.103

2 years ago

1.0.0-alpha.119

2 years ago

1.0.0-alpha.118

2 years ago

1.0.0-alpha.113

2 years ago

1.0.0-alpha.112

2 years ago

1.0.0-alpha.111

2 years ago

1.0.0-alpha.110

2 years ago

1.0.0-alpha.117

2 years ago

1.0.0-alpha.116

2 years ago

1.0.0-alpha.115

2 years ago

1.0.0-alpha.114

2 years ago

2 years ago

2 years ago

2 years ago

1.0.0-alpha.120

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

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