Level 102
Are you perhaps using pinia in App or router? Did you try
const pinia = createPinia();
createApp(App)
.use(pinia)
.use(router)
.use(VueAxios, axios)
.mount("#app");
Oct 8, 2022
13
Level 7
Just trying to add and use Pinia in my Vue 3 project but I get errors
Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.
main.js
import { createApp } from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import App from "./App.vue";
import router from "./router";
import createPinia from "pinia";
import "./styles/app.css";
createApp(App)
.use(router)
.use(createPinia())
.use(VueAxios, axios)
.mount("#app");
Level 102
Try this then
import { createPinia, setActivePinia } from "pinia"
const pinia = createPinia();
setActivePinia(pinia);
Based on https://stackoverflow.com/a/73221064
Level 7
@Sinnbeck Thanks, I am still getting:
Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia)
Level 7
here is my store:
import { defineStore } from "pinia";
export const useContactStore = defineStore("contacts", {
state: () => {
return {
contacts: [],
};
},
actions: {
create(contact) {
this.contacts.push({
...contact,
});
try {
if (!this.editing) {
axios
.post(
"https://APIENDPOINT/api/contacts",
this.contact
)
.then(() => {
this.alertShow = true;
this.alertClasses =
"bg-green-300 rounded border-2 border-green-500 p-2 my-2";
this.alertText = "Success, your contact has been added!";
this.clearFields();
this.$emit("close");
});
} else {
axios
.put(
`https://APICALL/${this.contactDetails.id}`,
this.contact
)
.then(() => {
this.alertShow = true;
this.alertClasses =
"bg-green-300 rounded border-2 border-green-500 p-2";
this.alertText = "Success, your contact has been updated!";
this.$emit("close");
});
}
} catch (error) {
console.log("ERROR: ", error);
}
},
},
getters: {
contactsByName(state) {
const sortable = [...state.contacts];
return sortable.sort((a, b) => a.last_name.localCompare(b.last_name));
},
},
});
here is my addEditForm.vue
<template>
<h2
v-if="
editing ? (headerText = 'Edit Contact') : (headerText = 'Add Contact')
"
class="text-xl"
>
{{ headerText }}
</h2>
<AlertBox
:alertShow="alertShow"
:alertClasses="alertClasses"
:alertText="alertText"
/>
<Form @submit.prevent="CreateContact">
<div class="my-4">
<label for="First Name"
>First Name <span class="text-red-700">*</span></label
>
<Field
name="first_name"
type="text"
placeholder="First Name"
v-model="contact_input.first_name"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="first_name" />
</div>
<div class="my-4">
<label for="Last Name"
>Last Name <span class="text-red-700">*</span></label
>
<Field
name="last_name"
type="text"
placeholder="Last Name"
v-model="contact_input.last_name"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="last_name" />
</div>
<div class="my-4">
<label for="Email">Email <span class="text-red-700">*</span></label>
<Field
name="email"
type="email"
placeholder="Email address"
v-model="contact_input.email"
class="w-full rounded border-2 border-gray p-2"
:rules="validateEmail"
/>
<ErrorMessage class="text-red-700 font-bold" name="email" />
</div>
<div class="my-4">
<label for="Phone">Phone <span class="text-red-700">*</span></label>
<Field
name="phone"
type="text"
placeholder="Phone Number"
v-model="contact_input.phone"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="phone" />
</div>
<div class="my-4">
<label for="Address"
>Address <span class="text-red-700">*</span></label
>
<Field
name="address"
type="text"
placeholder="Address"
v-model="contact_input.address"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="address" />
</div>
<div class="my-4">
<label for="Town/City"
>Town/City <span class="text-red-700">*</span></label
>
<Field
name="town_city"
type="text"
placeholder="Town or City"
v-model="contact_input.town_city"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="town_city" />
</div>
<div class="my-4">
<label for="Region/County"
>Region/County <span class="text-red-700">*</span></label
>
<Field
name="region_county"
type="text"
placeholder="Region or County"
v-model="contact_input.region_county"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="region_county" />
</div>
<div class="my-4">
<label for="Country"
>Country <span class="text-red-700">*</span></label
>
<select
v-model="contact_input.country_code"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
>
<option value="">Please select a country</option>
<option
v-for="country in countryListAllIsoData"
:key="country.id"
:value="country.code"
>
{{ country.name }}
</option>
</select>
</div>
<div class="my-4">
<label for="Postcode"
>Post code <span class="text-red-700">*</span></label
>
<Field
name="post_code"
type="text"
placeholder="post code"
v-model="contact_input.post_code"
class="w-full rounded border-2 border-gray p-2"
:rules="isRequired"
/>
<ErrorMessage class="text-red-700 font-bold" name="post_code" />
</div>
<div class="my-4">
<AppButton type="submit" class="rounded border-2 border-gray p-2">
<div
v-if="
editing
? (buttonText = 'Edit Contact')
: (buttonText = 'Add Contact')
"
>
{{ buttonText }}
</div>
</AppButton>
</div>
</Form>
</template>
<script>
import { useContactStore } from "@/store/contacts";
import { ref } from "vue";
import axios from "axios";
import AppButton from "@/components/AppButton.vue";
import AlertBox from "@/components/AlertBox.vue";
import { Form, Field, ErrorMessage } from "vee-validate";
const contact_store = useContactStore();
const contact_input = ref({
first_name: "",
last_name: "",
email: "",
phone: "",
address: "",
town_city: "",
region_county: "",
country_code: "",
post_code: "",
});
const sort = ref(false);
const CreateContact = () => {
contact_store.create(contact_input.value);
contact_input.value = {
first_name: "",
last_name: "",
email: "",
phone: "",
address: "",
town_city: "",
region_county: "",
country_code: "",
post_code: "",
};
};
export default {
name: "AddEditForm",
components: {
Form,
Field,
ErrorMessage,
AppButton,
AlertBox,
},
props: {
editing: {
type: Boolean,
default: false,
},
contactDetails: {
type: Object,
required: true,
},
},
data() {
return {
headerText: "",
buttonText: "",
first_name: "",
last_name: "",
email: "",
phone: "",
address: "",
town_city: "",
region_county: "",
country_code: "",
post_code: "",
errors: [],
contact: {},
alertShow: false,
alertClasses: "",
alertText: "",
countryListAllIsoData: [
{ code: "AF", code3: "AFG", name: "Afghanistan", number: "004" },
{ code: "AL", code3: "ALB", name: "Albania", number: "008" },
{ code: "DZ", code3: "DZA", name: "Algeria", number: "012" },
{ code: "AS", code3: "ASM", name: "American Samoa", number: "016" },
{ code: "AD", code3: "AND", name: "Andorra", number: "020" },
{ code: "AO", code3: "AGO", name: "Angola", number: "024" },
{ code: "AI", code3: "AIA", name: "Anguilla", number: "660" },
{ code: "WS", code3: "WSM", name: "Samoa", number: "882" },
{ code: "SM", code3: "SMR", name: "San Marino", number: "674" },
{
code: "ST",
code3: "STP",
name: "Sao Tome and Principe",
number: "678",
},
{ code: "SA", code3: "SAU", name: "Saudi Arabia", number: "682" },
{ code: "SN", code3: "SEN", name: "Senegal", number: "686" },
{ code: "RS", code3: "SRB", name: "Serbia", number: "688" },
{ code: "SC", code3: "SYC", name: "Seychelles", number: "690" },
{ code: "SL", code3: "SLE", name: "Sierra Leone", number: "694" },
{ code: "SG", code3: "SGP", name: "Singapore", number: "702" },
{
code: "SX",
code3: "SXM",
name: "Sint Maarten (Dutch part)",
number: "534",
},
{ code: "SK", code3: "SVK", name: "Slovakia", number: "703" },
{ code: "SI", code3: "SVN", name: "Slovenia", number: "705" },
{ code: "SB", code3: "SLB", name: "Solomon Islands", number: "090" },
{ code: "SO", code3: "SOM", name: "Somalia", number: "706" },
{ code: "ZA", code3: "ZAF", name: "South Africa", number: "710" },
{
code: "GS",
code3: "SGS",
name: "South Georgia and the South Sandwich Islands",
number: "239",
},
{ code: "SS", code3: "SSD", name: "South Sudan", number: "728" },
{ code: "ES", code3: "ESP", name: "Spain", number: "724" },
{ code: "LK", code3: "LKA", name: "Sri Lanka", number: "144" },
{ code: "SD", code3: "SDN", name: "Sudan (the)", number: "729" },
{ code: "SR", code3: "SUR", name: "Suriname", number: "740" },
{
code: "SJ",
code3: "SJM",
name: "Svalbard and Jan Mayen",
number: "744",
},
{ code: "SE", code3: "SWE", name: "Sweden", number: "752" },
{ code: "CH", code3: "CHE", name: "Switzerland", number: "756" },
{
code: "SY",
code3: "SYR",
name: "Syrian Arab Republic",
number: "760",
},
{ code: "TW", code3: "TWN", name: "Taiwan", number: "158" },
{ code: "TJ", code3: "TJK", name: "Tajikistan", number: "762" },
{
code: "TZ",
code3: "TZA",
name: "Tanzania, United Republic of",
number: "834",
},
{ code: "TH", code3: "THA", name: "Thailand", number: "764" },
{ code: "TL", code3: "TLS", name: "Timor-Leste", number: "626" },
{ code: "TG", code3: "TGO", name: "Togo", number: "768" },
{ code: "TK", code3: "TKL", name: "Tokelau", number: "772" },
{ code: "TO", code3: "TON", name: "Tonga", number: "776" },
{
code: "TT",
code3: "TTO",
name: "Trinidad and Tobago",
number: "780",
},
{ code: "TN", code3: "TUN", name: "Tunisia", number: "788" },
{ code: "TR", code3: "TUR", name: "Turkey", number: "792" },
{ code: "TM", code3: "TKM", name: "Turkmenistan", number: "795" },
{
code: "TC",
code3: "TCA",
name: "Turks and Caicos Islands (the)",
number: "796",
},
{ code: "TV", code3: "TUV", name: "Tuvalu", number: "798" },
{ code: "UG", code3: "UGA", name: "Uganda", number: "800" },
{ code: "UA", code3: "UKR", name: "Ukraine", number: "804" },
{
code: "AE",
code3: "ARE",
name: "United Arab Emirates (the)",
number: "784",
},
{
code: "GB",
code3: "GBR",
name: "United Kingdom of Great Britain and Northern Ireland (the)",
number: "826",
},
{
code: "UM",
code3: "UMI",
name: "United States Minor Outlying Islands (the)",
number: "581",
},
{
code: "US",
code3: "USA",
name: "United States of America (the)",
number: "840",
},
{ code: "UY", code3: "URY", name: "Uruguay", number: "858" },
{ code: "UZ", code3: "UZB", name: "Uzbekistan", number: "860" },
{ code: "VU", code3: "VUT", name: "Vanuatu", number: "548" },
{
code: "VE",
code3: "VEN",
name: "Venezuela (Bolivarian Republic of)",
number: "862",
},
{ code: "VN", code3: "VNM", name: "Viet Nam", number: "704" },
{
code: "VG",
code3: "VGB",
name: "Virgin Islands (British)",
number: "092",
},
{
code: "VI",
code3: "VIR",
name: "Virgin Islands (U.S.)",
number: "850",
},
{ code: "WF", code3: "WLF", name: "Wallis and Futuna", number: "876" },
{ code: "EH", code3: "ESH", name: "Western Sahara", number: "732" },
{ code: "YE", code3: "YEM", name: "Yemen", number: "887" },
{ code: "ZM", code3: "ZMB", name: "Zambia", number: "894" },
{ code: "ZW", code3: "ZWE", name: "Zimbabwe", number: "716" },
{ code: "AX", code3: "ALA", name: "Åland Islands", number: "248" },
],
};
},
beforeMount() {
if (this.editing === true) {
this.first_name = this.contactDetails.first_name;
this.last_name = this.contactDetails.last_name;
this.email = this.contactDetails.email;
this.phone = this.contactDetails.phone;
this.address = this.contactDetails.address;
this.town_city = this.contactDetails.town_city;
this.region_county = this.contactDetails.region_county;
this.country_code = this.contactDetails.country_code;
this.post_code = this.contactDetails.post_code;
}
},
methods: {
isRequired(value) {
if (value && value.trim()) {
return true;
}
return "This field is required";
},
validateEmail(value) {
// if the field is empty
if (!value) {
return "This field is required";
}
// if the field is not a valid email
const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (!regex.test(value)) {
return "This field must be a valid email";
}
// All is good
return true;
},
onSubmit() {
this.contact = {
first_name: this.first_name,
last_name: this.last_name,
email: this.email,
phone: this.phone,
address: this.address,
town_city: this.town_city,
region_county: this.region_county,
country_code: this.country_code,
post_code: this.post_code,
};
},
},
};
</script>
Level 7
I'm still stuck here
Level 50
The import should be like this (destructed):
import { createPinia } from 'pinia';
Level 7
I know
Level 7
I'm now getting:
export 'default' (imported as 'useContactStore') was not found in '@/store/contacts.js' (possible exports: useContactStore)
Level 7
Can anyone help me here or not? thanks
Level 1
That is not the way to use Pinia with Options API. Kindly refer to the docs on how to do so. https://pinia.vuejs.org/cookbook/options-api.html
Level 1
Hi, @boyjarv Check out this link : https://stackblitz.com/edit/vitejs-vite-bmg8rr?file=src/forms/loginForm.js basically you need to add the created store to useContactStore(store) This is for non component files
Please or to participate in this conversation.