@astrojs/vue - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

CHANGELOG.md

		# @astrojs/vue

		## 0.2.0

		### Minor Changes

		- [#3652](https://github.com/withastro/astro/pull/3652) [`7373d61c`](https://github.com/withastro/astro/commit/7373d61cdcaedd64bf5fd60521b157cfa4343558) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Adds support for passing named slots from `.astro` => framework components.

		Inside your components, use the built-in `slot` API as you normally would.

		## 0.1.5
		@@ -4,0 +12,0 @@

client.js

		@@ -5,3 +5,3 @@ import { h, createSSRApp, createApp } from 'vue';
		export default (element) =>
		(Component, props, children, { client }) => {
		(Component, props, slotted, { client }) => {
		delete props['class'];
		@@ -13,4 +13,4 @@ if (!element.hasAttribute('ssr')) return;
		const slots = {};
		if (children != null) {
		slots.default = () => h(StaticHtml, { value: children });
		for (const [key, value] of Object.entries(slotted)) {
		slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
		}
		@@ -17,0 +17,0 @@ if (client === 'only') {

dist/index.d.ts

		@@ -0,3 +1,3 @@
		import type { Options } from '@vitejs/plugin-vue';
		import type { AstroIntegration } from 'astro';
		import type { Options } from '@vitejs/plugin-vue';
		export default function (options?: Options): AstroIntegration;

package.json

		{
		"name": "@astrojs/vue",
		"version": "0.1.5",
		"version": "0.2.0",
		"description": "Use Vue components within Astro",
		@@ -33,3 +33,3 @@ "type": "module",
		"devDependencies": {
		"astro": "1.0.0-beta.38",
		"astro": "1.0.0-beta.54",
		"astro-scripts": "0.0.4",
		@@ -36,0 +36,0 @@ "vue": "^3.2.36"

server.js

		@@ -9,6 +9,6 @@ import { h, createSSRApp } from 'vue';

		async function renderToStaticMarkup(Component, props, children) {
		async function renderToStaticMarkup(Component, props, slotted) {
		const slots = {};
		if (children != null) {
		slots.default = () => h(StaticHtml, { value: children });
		for (const [key, value] of Object.entries(slotted)) {
		slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
		}
		@@ -15,0 +15,0 @@ const app = createSSRApp({ render: () => h(Component, props, slots) });

src/index.ts

		@@ -0,4 +1,4 @@
		import type { Options } from '@vitejs/plugin-vue';
		import vue from '@vitejs/plugin-vue';
		import type { AstroIntegration, AstroRenderer } from 'astro';
		import vue from '@vitejs/plugin-vue';
		import type { Options } from '@vitejs/plugin-vue';

		@@ -5,0 +5,0 @@ function getRenderer(): AstroRenderer {

static-html.js

		@@ -12,6 +12,7 @@ import { h, defineComponent } from 'vue';
		value: String,
		name: String,
		},
		setup({ value }) {
		setup({ name, value }) {
		if (!value) return () => null;
		return () => h('astro-fragment', { innerHTML: value });
		return () => h('astro-slot', { name, innerHTML: value });
		},
		@@ -18,0 +19,0 @@ });

New alerts