Migrate from v1 to v2

With v2 the documentation was changed. You can find the previous version here.

Component Import

The speedkitComponents property is removed from skeleton.

Instead, the SpeedkitHydrate is now used as a function wrapper.

old (v1)

export default {
  speedkitComponents: {
    Stage: () => import('@/components/organisms/Stage'),
  }
};

now (v2)

import speedkitHydrate from '#speedkit/hydrate';

export default {
  components: {
    Stage: speedkitHydrate(() => import('@/components/organisms/Stage')),
  }
};

Components

SpeedkitLayer

In the SpeedkitLayer the ids and style classes were updated, these are now kebab-case.

Type	old	new
id	#nuxt-speedkit__speedkit-layer	nuxt-speedkit-layer
id	#nuxt-speedkit__speedkit-layer__content	#nuxt-speedkit-layer-content
id	#nuxt-speedkit__speedkit-layer__close	#nuxt-speedkit-layer-close
class	.nuxt-speedkit__speedkit-layer--visible	.nuxt-speedkit-layer-visible
id	#nuxt-speedkit__message__nojs	#nuxt-speedkit-message-nojs
id	#nuxt-speedkit__message__unsupported-browser	#nuxt-speedkit-message-unsupported-browser
id	#nuxt-speedkit__message__outdated-device	#nuxt-speedkit-message-outdated-device
id	#nuxt-speedkit__message__slow-connection	#nuxt-speedkit-message-slow-connection
id	#nuxt-speedkit__button__init-nojs	#nuxt-speedkit-button-init-nojs
id	#nuxt-speedkit__button__init-font	#nuxt-speedkit-button-init-font
id	#nuxt-speedkit__button__init-app	#nuxt-speedkit-button-init-app

SpeedkitPicture / SpeedkitPictureExperimental

The SpeedkitPicture was replaced by a new version of the SpeedkitPictureExperimental, therefore the SpeedkitPictureExperimental was removed from the project.

When reusing a SpeedkitPictureExperimental as a SpeedkitPicture, the structure of the property sources must be adapted, this has been updated.

old (v1)

[ 
  { src: 'landscape.jpg', sizes: '992:1024' },
  { src: 'portrait.jpg', sizes: '414,768:768' }
]

now (v2)

[
  { src: '/img/landscape.png', sizes: { md: '100vw' }, media: '(orientation: landscape)' },
  { src: '/img/portrait.png', sizes: { default: '100vw', sm: '100vw' }, media: '(orientation: portrait)' }
]

More information about the integration of SpeedkitPicture can be found here.

WARNING

Important: In the new version of SpeedkitPicture the placeholder property is no longer included.

SpeedkitYoutube / SpeedkitYoutubeExperimental

With the change of the SpeedkitPicture also SpeedkitYoutube and SpeedkitYoutubeExperimental were reduced to SpeedkitYoutube.

The events loading and enter have been removed.

More information about the integration of SpeedkitYoutube can be found here.

SpeedkitIframe

Property intersectionObserver was renamed to componentObserver.

More information about the integration of SpeedkitIframe can be found here.