You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+41-55
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,9 @@
4
4
5
5
`vue-imgix` is a client library for generating URLs with [imgix](https://www.imgix.com/).
6
6
7
+
> ### Vue 2.x
8
+
> ⚠️ You are viewing the Vue 3.0 `@next` development branch. This branch is for preview purposes. There will be bugs and undocumented behavior differences from v2. For Vue 2, please look at the [`main`](https://github.com/imgix/vue-imgix/tree/main) branch. We will be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.
9
+
<!-- TODO(luis): update/remove badges for @next -->
-[Minimum and Maximum Width Ranges](#minimum-and-maximum-width-ranges)
57
+
-[Base64 Encoding](#base64-encoding)
52
58
-[What Is the `ixlib` Param on Every Request?](#what-is-the-ixlib-param-on-every-request)
53
59
-[Code of Conduct](#code-of-conduct)
54
60
-[Contributors](#contributors)
@@ -71,8 +77,8 @@ Firstly, follow this [quick start guide](https://docs.imgix.com/setup/quick-star
71
77
72
78
Then, install vue-imgix with the following commands, depending on your package manager.
73
79
74
-
-**NPM**: `npm install vue-imgix`
75
-
-**Yarn**: `yarn add vue-imgix`
80
+
-**NPM**: `npm install imgix/vue-imgix/@next`
81
+
-**Yarn**: `yarn add imgix/vue-imgix/@next`
76
82
77
83
This module exports two transpiled versions. If a ES6-module-aware bundler is being used to consume this module, it will pick up an ES6 module version and can perform tree-shaking. **If you are not using ES6 modules, you don't have to do anything.**
78
84
@@ -82,55 +88,34 @@ This module exports two transpiled versions. If a ES6-module-aware bundler is be
82
88
83
89
A polyfill for `Object.assign` must be supplied for browsers that need it. You probably have this already set up, so you likely don't need to do anything.
84
90
85
-
### Standard Vue 2.x App
91
+
### Standard Vue 3.x App
86
92
87
93
Vue-imgix needs to be initialized with a minimal configuration before it can be used in components. Modify your startup/init file (usually `main.js` or similar) to include the following:
88
94
89
95
```js
90
-
importVuefrom'vue';
96
+
import{ createApp }from'vue';
91
97
importVueImgixfrom'vue-imgix';
98
+
importAppfrom'./App.vue';
92
99
93
-
Vue.use(VueImgix, {
100
+
// Create and mount the root instance.
101
+
constapp=createApp(App);
102
+
// Make sure to _use_ the VueImgix instance to make the
103
+
// whole app VueImgix-aware.
104
+
app.use(VueImgix, {
94
105
domain:"<your company's imgix domain>",
95
106
defaultIxParams: {
96
107
// This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.
97
108
auto:'format',
98
109
},
99
110
});
111
+
112
+
app.mount('#app');
100
113
```
101
114
102
115
And that's all you need to get started! Have fun!
103
116
104
-
### Vue 3.x
105
-
106
-
⚠️ Currently this library does not explicitly support Vue 3, although we are planning to roll out official support for it soon. We will also be supporting Vue 2 for the official support timeline (18 months) after we release Vue 3 support.
107
-
108
117
### Nuxt.js
109
-
110
-
To configure vue-imgix for a Nuxt app:
111
-
112
-
1. Add a `vue-imgix.js` file in `/plugins` with the following contents:
113
-
114
-
```js
115
-
importVuefrom'vue';
116
-
importVueImgixfrom'vue-imgix';
117
-
118
-
Vue.use(VueImgix, {
119
-
domain:"<your company's imgix domain>",
120
-
defaultIxParams: {
121
-
// This enables the auto format imgix parameter by default for all images, which we recommend to reduce image size, but you might choose to turn this off.
122
-
auto:'format',
123
-
},
124
-
});
125
-
```
126
-
127
-
2. Add the plugin to your Nuxt config (in `nuxt.config.js`) like so:
128
-
129
-
```js
130
-
plugins: ['~/plugins/vue-imgix.js'],
131
-
```
132
-
133
-
And that's all you need to get started! Have fun!
118
+
Nuxt.js *[beta](https://www.npmjs.com/package/nuxt3)* still isn't public. As such, we don't explicitly support Nuxt.js with Version 3.x as of right now.
134
119
135
120
## Usage
136
121
@@ -293,6 +278,7 @@ For lazy loading, there are a few options to choose from. They're listed here, a
This approach uses native lazy loading for browsers that support it, which is more and more every day, and uses [Lozad.js](https://apoorv.pro/lozad.js/) for those that don't. Lozad.js uses Interaction Observers to watch for changes to DOM elements, and is more performant than using event listeners.
297
283
298
284
<picture>
@@ -473,7 +459,7 @@ We also provide `buildSrcSet` from imgix-core-js to help developers to create an
473
459
474
460
```html
475
461
<template>
476
-
<img:src="advancedSrc":srcset="advancedSrcSet" />
462
+
<img:src="advancedUrl":srcset="advancedSrcSet" />
477
463
</template>
478
464
479
465
<script>
@@ -623,7 +609,7 @@ becomes:
623
609
```
624
610
625
611
## What Is the `ixlib` Param on Every Request?
626
-
612
+
<!-- TODO(luis): update this to reflect Vue 3 Global API changes -->
627
613
For security and diagnostic purposes, we tag all requests with the language and version of library used to generate the URL.
628
614
629
615
To disable this, set `includeLibraryParam` to false when initializing `VueImgix`.
0 commit comments