### Install vue3-cookies

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Instructions for installing the vue3-cookies package using npm or yarn.

```bash
# Using npm
npm install vue3-cookies --save

# Using yarn
yarn add vue3-cookies
```

--------------------------------

### Install vue3-cookies as a Vue plugin (Legacy)

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Illustrates the legacy method of installing vue3-cookies as a Vue plugin, allowing access to cookies via `this.$cookies` in components.

```javascript
// main.ts or main.js
import { createApp } from "vue";
import VueCookies from "vue3-cookies";
import App from "./App.vue";

const app = createApp(App);

// Install with default options
app.use(VueCookies);

// Or install with custom configuration
app.use(VueCookies, {
  expireTimes: "30d",
  path: "/",
  domain: "",
  secure: true,
  sameSite: "None"
});

app.mount("#app");
```

--------------------------------

### Vue 3 Composition API Cookie Usage

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Demonstrates how to use the vue3-cookies plugin with Vue 3's Composition API. It shows how to import `useCookies`, access cookie methods like `get` and `set`, and integrate into the `setup` and `mounted` lifecycle hooks.

```javascript
// MyComponent.vue
<script>
import { useCookies } from "vue3-cookies";

export default defineComponent({
  setup() {
    const { cookies } = useCookies();
    return { cookies };
  },

  // <data, methods...>
  
mounted() {
    let my_cookie_value = this.cookies.get("myCoookie");
    console.log(my_cookie_value);
    this.cookies.set("myCoookie", "abcdefg");
  }
}
</script>
```

--------------------------------

### Vue.js 3 Cookie Management with vue-cookies

Source: https://github.com/kanhari/vue3-cookies/blob/master/sample/welcome.html

This snippet shows how to initialize a Vue instance, manage data properties, and define methods for interacting with cookies using the vue-cookies library. It includes setting, getting, and removing cookies, as well as updating the UI based on cookie state.

```javascript
new Vue({ 
  el:'#v-main',
  data: function() { 
    return { 
      welcomeValue: this.$cookies.get('username'), 
      deleteUserText : 'Delete Cookie',
      deleteUserState:'' 
    }
  },
  methods: {
    username : function(event){
      this.welcomeValue = event.target.value;
      this.$cookies.set('username', this.welcomeValue)
    },
    deleteUser: function(){
      this.$cookies.remove('username');
      this.deleteUserState = '√'
      setTimeout(function(){
        location.reload()
      }, 0.5 * 1000)
    }
  }
})
```

--------------------------------

### Set cookies with various options using cookies.set()

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Provides examples of using the `cookies.set()` method to set cookies with different expiration formats (string, number, Date object, 0 for session, Infinity for permanent), path, domain, security flags, SameSite attribute, and demonstrates method chaining and automatic JSON serialization.

```javascript
import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();

// Basic usage - default 1 day expiration
cookies.set("theme", "dark");

// With string expiration time
cookies.set("token", "GH1.1.1689020474", "30d");    // 30 days
cookies.set("session", "xyz789", "24h");            // 24 hours
cookies.set("temp", "value", "30min");              // 30 minutes
cookies.set("flash", "message", "60s");             // 60 seconds
cookies.set("persistent", "data", "1y");            // 1 year
cookies.set("monthly", "value", "2m");              // 2 months

// With numeric expiration (seconds)
cookies.set("short_lived", "value", 3600);          // 1 hour in seconds
cookies.set("daily", "value", 60 * 60 * 24);        // 24 hours in seconds

// With Date object
const futureDate = new Date();
futureDate.setDate(futureDate.getDate() + 7);
cookies.set("expires_date", "value", futureDate);

// Session cookie (expires when browser closes)
cookies.set("session_only", "value", 0);

// Never expire
cookies.set("permanent", "value", Infinity);
cookies.set("permanent_alt", "value", -1);

// With all parameters: name, value, expireTimes, path, domain, secure, sameSite
cookies.set("secure_cookie", "value", "7d", "/app", "example.com", true, "Strict");

// Store JSON objects (automatically serialized)
const user = { id: 1, name: "John", role: "admin" };
cookies.set("user", user, "30d");

// Method chaining
cookies
  .set("theme", "dark", "30d")
  .set("language", "en", "30d")
  .set("timezone", "UTC", "30d");
```

--------------------------------

### Vue Plugin Usage with Default Configuration (Legacy)

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Illustrates the older method of using vue3-cookies as a Vue plugin, including how to set default configurations during the plugin installation. It also shows how to set cookies within a component using `this.$cookies`.

```javascript
// es2015 module
import Vue from 'vue'
import VueCookies from 'vue3-cookies'

let app = createApp(App);
app.use(VueCookies);

// Or to set default config:
app.use(VueCookies, {
    expireTimes: "30d",
    path: "/",
    domain: "",
    secure: true,
    sameSite: "None"
});


// set global cookie in component:
this.$cookies.set('theme','default');
this.$cookies.set('hover-time','1s');
```

--------------------------------

### Remove Cookies

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Provides examples for removing cookies. It shows how to remove a cookie from the current domain and subdomains, and how to remove a cookie specifically for a given domain.

```javascript
this.$cookies.set("token",value); // domain.com and *.doamin.com are readable
this.$cookies.remove("token"); // remove token of domain.com and *.doamin.com 

this.$cookies.set("token", value, null, null, "domain.com"); // only domain.com are readable
this.$cookies.remove("token", null, "domain.com"); // remove token of domain.com
```

--------------------------------

### Use Composition API with useCookies() hook

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Demonstrates how to use the `useCookies()` hook in Vue 3 components to access and manage cookies. It shows setting, getting, and checking for cookie existence.

```javascript
// MyComponent.vue
<script>
import { defineComponent } from "vue";
import { useCookies } from "vue3-cookies";

export default defineComponent({
  setup() {
    const { cookies } = useCookies();

    // Set a cookie
    cookies.set("user_session", "abc123xyz", "7d");

    // Get a cookie
    const session = cookies.get("user_session");
    console.log(session); // Output: "abc123xyz"

    // Check if cookie exists
    const exists = cookies.isKey("user_session");
    console.log(exists); // Output: true

    return { cookies };
  },

  mounted() {
    // Also accessible via this.cookies in options API methods
    const value = this.cookies.get("user_session");
  }
});
</script>
```

--------------------------------

### Other Cookie Operations

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Covers essential cookie management operations: checking if a cookie exists (`isKey`), getting a cookie's value (`get`), removing a cookie (`remove`), retrieving all cookie keys (`keys`), and clearing all cookies.

```javascript
// check a cookie exist
this.$cookies.isKey("token")

// get a cookie
this.$cookies.get("token");

// remove a cookie
this.$cookies.remove("token");

// get all cookie key names, line shows
this.$cookies.keys().join("\n"); 

// remove all cookie
this.$cookies.keys().forEach(cookie => this.$cookies.remove(cookie))
```

--------------------------------

### vue3-cookies API Methods

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Details the available methods for interacting with cookies using the vue3-cookies plugin. This includes `set`, `get`, `remove`, `isKey`, and `keys` for managing cookies.

```javascript
syntax format: **[this | Vue].$cookies.[method]**

* Set a cookie
```
$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure[, sameSite]]]]])   //return this
```
* Get a cookie
```
$cookies.get(keyName)  // return value                             
```
* Remove a cookie
```
$cookies.remove(keyName [, path [, domain]])  // return this
```
* Exist a `cookie name`
```
$cookies.isKey(keyName)  // return false or true
```
* Get All `cookie name`
```
$cookies.keys()  // return a array
```
```

--------------------------------

### Get All Cookie Names with vue3-cookies

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Retrieves an array containing the names of all currently stored cookies. This method is useful for iterating over all cookies or clearing them.

```javascript
import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();

// Set some cookies
cookies.set("theme", "dark");
cookies.set("language", "en");
cookies.set("user_id", "12345");

// Get all cookie names
const allKeys = cookies.keys();
console.log(allKeys); // Output: ["theme", "language", "user_id"]

// Display all cookies
cookies.keys().forEach(key => {
  console.log(`${key}: ${cookies.get(key)}`);
});
// Output:
// theme: dark
// language: en
// user_id: 12345

// Count cookies
console.log(`Total cookies: ${cookies.keys().length}`);

// Clear all cookies
cookies.keys().forEach(cookie => cookies.remove(cookie));
```

--------------------------------

### Configuring Cookie Expiration Times

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Provides examples of how to set cookie expiration times using various formats, including string representations ('30d', '7d'), numerical values representing seconds, Date objects, and date strings. It also shows how to set cookies to expire at the end of the browser session.

```javascript
// 30 day after, expire
app.use(VueCookies, {
    expireTimes: "30d",
});

// set secure, only https works
app.use(VueCookies, {
    expireTimes: "7d",
    secure: true,
});

// 2019-03-13 expire
app.use(VueCookies, {
    expireTimes: new Date(2019,03,13).toUTCString(),
});

// 30 day after, expire, '' current path , browser default
app.use(VueCookies, {
    expireTimes: 60 * 60 * 24 * 30,
    path: "",
});


// default expire time: 1 day
this.$cookies.set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")
        // number + d , ignore case
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1d")
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
        // Base of second
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", 60 * 60 * 24)
        // input a Date, + 1day
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))
        // input a date string, + 1day
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")


this.$cookies.set("default_unit_second","input_value",1);            // 1 second after, expire
this.$cookies.set("default_unit_second","input_value",60 + 30);      // 1 minute 30 second after, expire
this.$cookies.set("default_unit_second","input_value",60 * 60 * 12); // 12 hour after, expire
this.$cookies.set("default_unit_second","input_value",60 * 60 * 24 * 30); // 1 month after, expire


this.$cookies.set("default_unit_second","input_value",0);          // end of session - use 0 or "0"!

```

--------------------------------

### Get Cookie Value with vue3-cookies

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Retrieves a cookie value by its name. It automatically parses JSON objects if the cookie's value is a JSON string. Returns null if the cookie does not exist.

```javascript
import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();

// Get a simple string value
const theme = cookies.get("theme");
console.log(theme); // Output: "dark"

// Get a JSON object (automatically parsed)
cookies.set("user", { id: 1, name: "John", session: "abc123" });
const user = cookies.get("user");
console.log(user.name);    // Output: "John"
console.log(user.id);      // Output: 1
console.log(user.session); // Output: "abc123"

// Non-existent cookie returns null
const missing = cookies.get("nonexistent");
console.log(missing); // Output: null
```

--------------------------------

### Set Cookie with Additional Arguments (Path, Domain, Secure, SameSite)

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Demonstrates setting cookies with advanced options including path, domain, secure flag, and SameSite attribute. The SameSite attribute can be set to 'None', 'Strict', or 'Lax'.

```javascript
// set path
this.$cookies.set("use_path_argument","value","1d","/app");  

// set domain
this.$cookies.set("use_path_argument","value",null, null, "domain.com");   // default 1 day after,expire

// set secure
this.$cookies.set("use_path_argument","value",null, null, null,true);

// set sameSite - should be one of `None`, `Strict` or `Lax`. Read more https://web.dev/samesite-cookies-explained/
this.$cookies.set("use_path_argument","value",null, null, null, null, "Lax");
```

--------------------------------

### Global Cookie Configuration for vue3-cookies

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Shows how to configure global settings for the vue3-cookies plugin. This includes setting default expiration times, paths, domains, and security options like `secure` and `sameSite`. This configuration should typically be done in your application's main entry file (e.g., `main.ts` or `main.js`).

```javascript
// Optional - global config at main.ts / main.js
// <main.ts OR main.js>

import { globalCookiesConfig } from "vue3-cookies";

globalCookiesConfig({
  expireTimes: "30d",
  path: "/",
  domain: "",
  secure: true,
  sameSite: "None",
});

// <createApp(App).use(router).mount("#app");>, etc.
```

--------------------------------

### Configure global cookie settings with globalCookiesConfig()

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Shows how to set default cookie configurations globally for the application using `globalCookiesConfig()`. These settings apply to all cookies unless overridden.

```javascript
// main.ts or main.js
import { createApp } from "vue";
import { globalCookiesConfig } from "vue3-cookies";
import App from "./App.vue";

// Configure global defaults before mounting app
globalCookiesConfig({
  expireTimes: "30d",      // Default: 30 days expiration
  path: "/",               // Default: root path
  domain: "",              // Default: current domain
  secure: true,            // Default: HTTPS only
  sameSite: "None",        // Default: cross-site cookie policy
});

createApp(App).mount("#app");
```

--------------------------------

### CookiesConfig Interface and Global Configuration in vue3-cookies

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Defines the TypeScript interface for cookie configuration options and demonstrates how to set global default configurations using `globalCookiesConfig`. This allows setting default expiration, path, domain, secure, and sameSite policies for all cookies.

```typescript
interface CookiesConfig {
  expireTimes: string | number | Date;  // Expiration: "30d", 3600, new Date()
  path?: string;                         // Cookie path, default "/"
  domain?: string;                       // Cookie domain
  secure?: boolean;                      // HTTPS only, default false
  sameSite?: string;                     // "None", "Lax", or "Strict"
}

// Usage with globalCookiesConfig
import { globalCookiesConfig } from "vue3-cookies";

const config: CookiesConfig = {
  expireTimes: "7d",
  path: "/",
  domain: "myapp.com",
  secure: true,
  sameSite: "Strict"
};

globalCookiesConfig(config);
```

--------------------------------

### Set Cookie Expiration Times (String Input)

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Demonstrates setting cookie expiration times using various string formats like seconds ('s'), minutes ('min'), hours ('h'), days ('d'), months ('m'), and years ('y'). The library supports case-insensitive units and does not support combined units or double values for expiration.

```javascript
this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");  // 60 second after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN");  // 30 minute after, expire, ignore case
this.$cookies.set("token","GH1.1.1689020474.1484362313","24d");  // 24 day after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","4m");  // 4 month after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","16h");  // 16 hour after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","3y");  // 3 year after, expire

// input date string 
this.$cookies.set('token',"GH1.1.1689020474.1484362313", new Date(2017,3,13).toUTCString());
this.$cookies.set("token","GH1.1.1689020474.1484362313", "Sat, 13 Mar 2017 12:25:57 GMT ");
```

--------------------------------

### Handling JSON Objects with vue3-cookies

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Demonstrates how to set and retrieve JSON objects as cookie values using the vue3-cookies plugin. The plugin automatically handles the serialization and deserialization of JSON data.

```javascript
var user = { id:1, name:'Journal',session:'25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX' };
this.$cookies.set('user',user);
// print user name
console.log(this.$cookies.get('user').name)
```

--------------------------------

### Vue-Cookies Global Access

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Explains how to access vue-cookies methods globally within a Vue application using `[this | Vue].$cookies.[method]`.

```javascript
// vue-cookies global
[this | Vue].$cookies.[method]
```

--------------------------------

### Set Cookie to Never Expire

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Illustrates how to set a cookie to never expire by passing `Infinity` or `-1` as the expiration value. Other negative numbers are considered invalid for never expiring.

```javascript
this.$cookies.set("token","GH1.1.1689020474.1484362313", Infinity);  // never expire
// never expire , only -1,Other negative Numbers are invalid
this.$cookies.set("token","GH1.1.1689020474.1484362313", -1);
```

--------------------------------

### Set Cookie Expiration with Date Object

Source: https://github.com/kanhari/vue3-cookies/blob/master/README.md

Shows how to set a cookie's expiration date using a JavaScript Date object. The expiration is set to one day from the current date.

```javascript
var date = new Date;
date.setDate(date.getDate() + 1);
this.$cookies.set("token","GH1.1.1689020474.1484362313", date);
```

--------------------------------

### Remove Cookie with vue3-cookies

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Deletes a cookie by its name. It can also accept optional path and domain arguments to specify which cookie to remove if multiple cookies share the same name but different paths/domains. Returns true if the cookie was successfully removed, and false if the cookie did not exist.

```javascript
import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();

// Basic removal
cookies.set("token", "abc123");
const removed = cookies.remove("token");
console.log(removed); // Output: true

// Remove with path and domain (must match how cookie was set)
cookies.set("api_token", "xyz789", null, "/api", "example.com");
cookies.remove("api_token", "/api", "example.com");

// Remove non-existent cookie
const notFound = cookies.remove("nonexistent");
console.log(notFound); // Output: false

// Remove all cookies
cookies.keys().forEach(cookieName => {
  cookies.remove(cookieName);
});
```

--------------------------------

### Check Cookie Existence with vue3-cookies

Source: https://context7.com/kanhari/vue3-cookies/llms.txt

Checks if a cookie with the specified name exists. Returns a boolean value: true if the cookie exists, and false otherwise. This is useful for conditional logic.

```javascript
import { useCookies } from "vue3-cookies";

const { cookies } = useCookies();

cookies.set("auth_token", "secret123");

// Check existence
const hasAuth = cookies.isKey("auth_token");
console.log(hasAuth); // Output: true

const hasMissing = cookies.isKey("nonexistent");
console.log(hasMissing); // Output: false

// Conditional logic based on cookie existence
if (cookies.isKey("user_session")) {
  console.log("User is logged in");
  const session = cookies.get("user_session");
} else {
  console.log("User needs to log in");
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.